css: clip浅析

前言

css中裁剪和遮罩相关的属性一般来说是比较少用到的，但是最近写项目的时候遇到一个问题，要给一张图片上加个白色遮罩，产生合成效果，这就不得不用到css遮罩相关的属性，顺便把裁剪相关属性一起学习来，做个总结，接下来就进入正文

clip-path

clip是css中第一个用来裁剪的属性，但是由于新的标准，clip特性已经从web标准中删除，建议使用clip-path，因此我们来看clip-path是怎么用的

语法

<clip-source>用<url>表示剪切元素的路径

<basic-shape> 一种形状，其大小和位置由<几何盒>值定义。如果没有指定几何框，则边框将用作参考框

<geometry-box> 如果同 <basic-shape> 一起声明，它将为基本形状提供相应的参考框盒。通过自定义，它将利用确定的盒子边缘包括任何形状边角

接下来就一个个来看具体的属性，先从basic-shape开始，basic-shape提供了多个函数，先来看最常用的函数：inset()

inset

inset( <shape-arg>{1,4} [round <border-radius>]? )

inset表示方形裁剪，函数提供来五个参数，前四个参数分别代表插进的长方形与相关盒模型的上右下左四个边界的偏移量，第五个可选参数<border-radius>用于定义插进长方形顶点的圆弧角度

光看字面意思可能不太好理解，来个例子吧：

<div class="wrap">
    <img class="lake" src="../img/lake.jpg">
</div>

.wrap {
  display: inline-block;
  line-height: 1;
  background-color: #000;
}
.lake {
  width: 200px;
}

.lake {
  width: 200px;
  clip-path: inset(10px 15px 20px 25px round 10px);
}

第一段代码没有给clip-path时，得到图片周围没有黑边，当加上clip-path时，图片周围产生了黑边，黑边的部分就是图片被裁掉的不部分，inset(10px 15px 20px 25px round 10px)，上边界10px，右边界15px，下边界20px，左边界25px，裁剪角弧度10px,通过这个例子应该就能看出参数作用。

接下看第二个函数circle()：

circle( [<shape-radius>]? [at <position>]?

circle表示圆形裁剪，函数提供两个可选参数，第一个圆形的半径，第二个圆心的位置

来看个例子:

.lake {
  width: 200px;
  clip-path: circle(50px at 80px 80px);
}

.lake {
  width: 200px;
  clip-path: circle(50px at center);
}

circle()的圆心位置除了指定具体的值外还可以通过center这种位置参数直接指定圆心的位置。

第三个函数：ellipse()

ellipse( [<shape-radius>{2}]? [at <position>]? )

ellipse表示椭圆裁剪，提供三个参数，第一个参数x轴方向半径，第二个参数y轴方向半径，第三个参数圆心的位置

来看个例子：

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at 100px 100px);
}

.lake {
  width: 200px;
  clip-path: ellipse(100px 50px at top);
}

和circle一样ellipse的圆心位置也可以使用top这类的位置值

第四个函数：polygon()

polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )

polygon表示多边形裁剪，第一个参数<fill-rule> 代表了多边形的填充规则，可选值nonzero 和 evenodd，第二个参数是多边形顶点坐标的合集

来看个例子：

.lake {
  width: 200px;
  height: 200px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}

上面这个例子利用了多边形裁剪的规则，将图片裁剪成了一个五角星，fill-rule两个关键字都试了一下，裁剪效果相同，这里有一个网址，上面clip-path basic-shape的所有用法演示，感兴趣的可以上去看看

第五个函数：path()，这个函数尝试了一下，在Chrome和Firefox两个浏览器上都不生效

url()

这里的clip-path url()函数里的参数并不是裁剪的用链接地址，而是一个剪切元素用的svg路径，举个例子：

<div class="wrap">
  <img class="lake" src="../img/lake.jpg">
  <svg width="0" height="0">
    <defs>
      <clipPath id="clip">
          <path d="M 10,30
          A 20,20 0,0,1 50,30
          A 20,20 0,0,1 90,30
          Q 90,60 50,90
          Q 10,60 10,30 z">
          </path>
      </clipPath>
   </defs>
  </svg>
</div>

.lake {
  width: 200px;
  clip-path: url(#clip)
}

上例子中利用svg的路径裁剪，将图片裁剪成了一个心形

裁剪参考框

裁剪参考框指的是裁剪元素的参考框盒，取值margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|，一般和basic-shape一起使用，举个例子：

.lake {
  width: 200px;
  clip-path:margin-box inset(10px 15px 20px 25px round 10px);
  background-color: #000;
}

这里的几个取值就不做详细介绍，和css盒模型类似，还有一个原因这个值在Chrome上不支持，但是Firefox上是可以使用的

浏览器支持

css属性功能再强大也要看浏览器的支持的程度，浏览器不支持说啥都没用.

上面是caniuse上查到的浏览器支持程度，可以看到出来一些低版本的浏览器不支持外，大多数高版本的浏览器都是支持的，可以放心使用

clip-path动画

基本语法和浏览器支持都介绍完了，接下来来看看clip-path的简单应用：clip-path动画，来看一个简单demo：

 @keyframes shape {
  from {
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  }

  to {
    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
  }
}
.lake {
  width: 200px;
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  animation: 2s shape infinite alternate ease-in-out;
}

上例中利用clip-path写了一个简单的图形变换的动画，这算是一个比较简单的应用，实际上在处理图片展示和图形变换上的用处会更多，可以配合其他的属性写出很多复杂的图片展示效果

总结

clip-path算是一个不常用的css属性，由于最近在写图片编辑的时候用到了，因此写了这篇文章对clip-path用法做了简单的介绍，clip-path的强大还需要大家自己去项目中使用的时候慢慢体会，希望看了这篇文章对大家能有所帮助。如果有错误或不严谨的地方，欢迎批评指正，如果喜欢，欢迎点赞