​​css中clip-path学习与应用​​

clip-path可以定义一个裁剪区域，区域内的内容可以展示，区域外的内容则被隐藏，还可以用来绘制圆形，多边形，不规则图形等，功能非常强大

clip-path使用介绍

 clip-path:circle()绘制圆形

clip-path: circle(50% at 50% 50%);

效果：

值定义：circle(半径 at x坐标 y坐标）--可以使用百分比或者具体单位%，px

---

 clip-path:circle()绘制椭圆

clip-path: ellipse(50% 25% at 50% 50%);

效果：

值定义：ellipse(水平方向半径  垂直方向半径 at x坐标  y坐标)

---

 clip-path:polygon()绘制多边形

clip-path: polygon(10% 10%,80% 10%,80% 20%,60% 30%,30% 30%);

效果：

值定义：polygon(点1x坐标 点1y坐标,点2x坐标 点2y坐标,点3x坐标 点3y坐标,点4x坐标 点4y坐标,点5x坐标 点5y坐标)

---

  clip-path:inset()绘制矩形

clip-path: inset(10% 50% 30% 20%);
clip-path: inset(10% 50% 30% 20% round 15%);

 效果：

值定义：inset(上偏移量 右偏移量 下偏移量 左偏移量) 

              inset(上偏移量 右偏移量 下偏移量 左偏移量 round 弧度) 

 介绍完啦开始实际使用

 clip-path实际应用 

 裁剪圆形图片展示 

 <div class="clipPath">
    <img src="http://192.168.1.85/child/app-pvbCenter/image/portal-logo.png" alt="">
  </div>

<style>
.clipPath{
      width:200px;
      height: 200px;
      clip-path: circle(100px at 100px 150px)
    }
</style>

效果： 

---

裁剪多边形展示区域

 .clipPath{
      width:300px;
      height: 300px;
      clip-path: polygon(100px 210px,124px 134px,205px 134px,140px 87px,165px 10px, 100px 58px,35px 10px,60px 87px,0 134px,75px 134px)
    }

效果： 

---

裁剪矩形展示区域

.clipPath{
      width:300px;
      height: 300px;
      clip-path: inset(10px 40px round 15%)
    }

效果：