## 一、 裁剪 &emsp;&emsp;裁剪（clipping）能让元素显示指定形状的区域，在布局时可起点缀的作用，丰富了视觉呈现。注意，裁剪本质上只是让元素的部分区域透明，由此可知，裁剪完后元素所占的空间仍旧会保留。裁剪最早是在CSS 2.1时代由clip属性引入，但该属性只能应用于绝对定位的元素，并且只能裁剪成矩形。CSS3提供了强大的clip-path属性，突破了clip属性的众多限制，接下来将围绕clip-path属性展开讲解。 **1）裁剪形状** &emsp;&emsp;clip-path属性可以使用四种裁剪函数：circle()、ellipse()、inset()和polygon()，它们的作用和浮动形状中的shape-outside属性中的形状函数相同。 &emsp;&emsp;下面用一个例子来演示这四个函数的效果，将它们分别应用到四个div元素中，样式如下，得到的形状如下图所示。 ~~~css div { width: 200px; height: 200px; background: url(./lake.png); } .circle { clip-path: circle(50%); } .ellipse { clip-path: ellipse(50% 30%); } .inset { clip-path: inset(20px 10px); } .polygon { clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px); } ~~~ :-:  **2）裁剪盒子** &emsp;&emsp;裁剪盒子可指定形状的边界，其中margin-box、border-box、padding-box和content-box的作用与shape-outside属性中的相同，并且这些关键字也能与裁剪函数组合使用，如下所示。在下图中，左侧是原图，右侧是使用了clip-path属性后的效果。 ~~~css div { width: 160px; height: 160px; padding: 20px; clip-path: content-box circle(50%); } ~~~ :-:  &emsp;&emsp;还有三个关键字view-box、fill-box和stroke-box适用于SVG元素，具体用途可在网上查到相关资料。 **3）裁剪路径** &emsp;&emsp;对于复杂的形状，可以采用SVG来创建裁剪路径，实现自定义。引用方式和滤镜中的一样，也是使用url()函数，但指向的是SVG文件中的clipPath元素，下面的SVG文件源自MDN网站。 ~~~html <svg height="0" width="0" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="cross"> <rect y="110" x="137" width="90" height="90" /> <rect x="0" y="110" width="90" height="90" /> <rect x="137" y="0" width="90" height="90" /> <rect x="0" y="0" width="90" height="90" /> </clipPath> </defs> </svg> ~~~ &emsp;&emsp;有两种方式引用SVG文件中的形状，第一种是外部引用，将SVG元素放在单独的文件中；第二种是行内引用，将SVG元素放在当前的HTML结构中。下面用两个CSS类来演示这两种引用方式，其中url()函数接收的参数的最大区别就是是否包含文件路径。 ~~~css .url-cross { clip-path: url(./shapes.svg#cross); } .inline-cross { clip-path: url(#cross); } ~~~ &emsp;&emsp;两种方式的效果是相同的，都是将元素裁剪成四部分，如下图所示。注意，外部引用的浏览器支持度比较糟糕，目前只有Firefox支持。 :-:  ## 二、遮罩 **1）蒙版** &emsp;&emsp;蒙版（masking）与裁剪类似，也是让元素以某种形状显示，但蒙版能根据透明度和灰度值计算裁剪边缘，并且有更多的蒙版属性可供选择，例如定位、尺寸、填充方式等。 &emsp;&emsp;下面用一个例子来演示蒙版的用法，首先创建HTML结构，包含三个div元素。 ~~~html <div class="lake"></div> <div class="star"></div> <div class="lake star-mask"></div> ~~~ &emsp;&emsp;然后为三个div元素添加背景图，并给第三个元素定义蒙版，样式如下。注意，在Chrome浏览器中定义蒙版属性时，需要额外添加-webkit-前缀，例如将原来的mask-image属性改成-webkit-mask-image属性。 ~~~css .lake { background: url(./lake.png); } .star { background: url(./star-shadow.png); background-position: center; background-repeat: no-repeat; } .star-mask { mask-image: url(./star-shadow.png); mask-position: center; mask-repeat: no-repeat; } ~~~ &emsp;&emsp;在下图中，将第二张五角星作为蒙版，作用到第一张风景照中，第三张是发生遮罩后的效果图，可以看到五角星中不透明和半透明的区域会显示风景照中的内容。 :-:  &emsp;&emsp;在.star-mask类中用到了mask-position，它的语法与background-position一样，下表列出了所有的蒙版属性和背景属性之间的对应关系。 :-:  &emsp;&emsp;CSS还提供了一个简写属性mask，可将上述属性合并到该属性中。关于蒙版还有一点需要注意，那就是遮罩用的蒙版图像既可以是位图图像（png、jpg等），也可以是矢量图形（指向SVG中的mask元素）。 **2）替换元素的填充和定位** &emsp;&emsp;CSS3引入了两个新属性，用于遮罩替换元素。第一个是object-fit属性，用来控制替换元素的内容以何种方式填充当前所使用的元素盒子，它有5个关键字可供选择，如下所列，效果如下图所示。 &emsp;&emsp;（1）fill：将元素盒子填充满，它是object-fit属性的默认值。 &emsp;&emsp;（2）contain：保持宽高比缩放，直到能将整块内容填充进元素盒子为止。 &emsp;&emsp;（3）none：保持原有尺寸填充。 &emsp;&emsp;（4）cover：保持宽高比缩放，直到水平或垂直方向撑满元素盒子为止。 &emsp;&emsp;（5）scale-down：作用与none或contain中的一个相同，取决于谁的尺寸更小。 :-:  &emsp;&emsp;第二个是object-position属性，用来控制替换元素的内容在元素盒子中的位置，其语法和background-position相同。 ***** > 原文出处： [博客园-CSS躬行记](https://www.cnblogs.com/strick/category/1667864.html) [知乎专栏-CSS躬行记](https://zhuanlan.zhihu.com/pwcss) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。