css：裁剪分析
时间：2023-03-30 14:17:19
CSS
前言css中裁剪和遮罩相关的属性一般用的比较少，但是最近在写项目的时候遇到了一个问题，需要给一张图片加上白色的遮罩，产生一个复合效果，需要使用cssmask相关的属性。顺便一起学习裁剪相关的属性做一个总结，然后进入正文clip-pathclip是css中第一个用于裁剪的属性。但是，由于新标准，剪辑功能已从网络标准中删除。推荐使用clip-path，下面看看clip-path是怎么使用的。语法使用表示剪辑元素的路径大小和位置由值定义的形状。如果未指定几何框，则边界框将用作参考框如果声明为，将为基本形状提供相应的参考框。通过自定义，它将使用确定的框边，包括任何形状的角。接下来我们一一看具体的属性。让我们从基本形状开始。basic-shape提供多种功能。我们先看看最常用的函数。:inset()insetinset({1,4}[round]?)inset表示方形切割，函数提供五个参数，前四个参数代表插入的矩形和相关的偏移量盒模型的上、右、下和左边界。第五个可选参数用于定义插入矩形顶点的圆弧的角度。字面意思可能不太好理解。举个例子吧：
.wrap{行高：1；背景颜色：#000；}.lake{宽度：200px；}.lake{宽度：200px；clip-path:inset(10px15px20px25pxround10px);}当第一段代码没有给出clip-path时，得到图片周围没有黑边。添加clip-path后，图像周围会生成黑色边框。黑色边框的部分是图像中被裁掉的部分，下边框20px，左边框25px，裁剪角10px。你应该可以通过这个例子看到参数的作用。接下来我们看第二个函数circle()：circle([
]?[at]?circle表示圆切割，该函数提供了两个可选参数，第一个圆的半径，我们看在第二个圆心的位置为例：.lake{width:200px;clip-path:circle(50pxat80px80px);}.lake{width:200px;clip-path:circle(50pxatcenter);}circle()的圆心位置除了可以指定一个具体的值外，还可以通过position参数center直接指定圆心的位置。第三个函数：ellipse()ellipse([{2}]?[at]?)ellipse表示椭圆裁剪，提供三个参数，第一个参数是x轴方向的半径，第二个第一个参数是y轴方向的半径，第三个参数是圆心的位置。让我们看一个例子：.lake{width:200px;剪辑路径：椭圆（100px50px100px100px）;}.lake{宽度：200px;clip-path:ellipse(100px50pxattop);}和圆一样，椭圆中心的位置也可以使用top的位置值。第四个函数：polygon()polygon([,]?[]#)polygon表示多边形裁剪，第一个参数表示多边形填充规则，可选值nonzero和evenodd，第二个参数是多边形顶点坐标的集合看例子：.lake{width:200px;高度：200px；剪辑路径：多边形（50%0%、61%35%、98%35%、68%57%、79%91%、50%70%、21%91%、32%57%、2%35%,39%35%)}上面的例子使用多边形裁剪规则将图片裁剪成五角星，fill-rule关键字也试过了，裁剪效果是一样的，这里是一个网站，所有的上面clip-pathbasic-shape的使用演示，有兴趣的可以上去看看第五个函数：path()，试试这个函数，在Chrome和Firefox浏览器上都不行。url()这里的clip-pathurl()函数中的参数不是用于裁剪的链接地址，而是用于裁剪元素的svg路径。例如：<defs> 。湖{宽度：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-boxinset(10px15px20px25pxround10px);background-color:#000;}这里的几个值就不详细介绍了，类似于css的盒子模型，还有一个原因就是这个值在Chrome上不支持，但是在Firefox上有。浏览器支持css属性功能再强大，也要看浏览器支持的程度。说浏览器不支持也没用。以上是caniuse上查到的浏览器支持度。可以看到有些低版本的浏览器是不支持的。支持大多数高版本浏览器，因此您可以放心使用剪辑路径动画。已经介绍了基本的语法和浏览器支持。下面我们来看看clip-path的简单应用：clip-path动画。让我们看一个简单的演示：@keyframesshape{from{clip-path:polygon(50%0%,60%40%,100%50%,60%60%,50%100%,40%60%,0%50%,40%40%);}到{剪辑路径：p多边形（50%30%、100%0%、70%50%、100%100%、50%70%、0%100%、30%50%、0%0%）；}}。湖{宽度：200px;剪辑路径：多边形（50%0%、60%40%、100%50%、60%60%、50%100%、40%60%、0%50%、40%40%）；animation:2sshapeinfinitealternateease-in-out;}在上面的例子中，使用clip-path编写了一个简单的图形变换动画。这是一个相对简单的应用程序。更多的，你可以写出很多复杂的图片显示效果加上其他的属性。摘要clip-path是一个不常见的css属性。由于最近写图片编辑的时候用到了，所以写了这篇关于clip-path用法的文章。我做了一个简单的介绍。clip-path的强大还是需要大家在项目中使用的时候去体会。希望阅读本文对您有所帮助。如有错误或不严谨的地方，欢迎批评指正。如果喜欢，请点赞
