前提
css 现在已经支持clip-path,mask进行图片的裁切，从而实现各种特殊形状
clip-path 和mask 的异同点
clip-path里面的只能是基础图形，css 里有对应的circle()等基本图形函数进行实现，他所定义的图形为裁剪出来的可是区域，因为不支持path的缘故，在简单图形上裁切上它的效果不错但是在灵活度上比较差。
它在一个clippath标签里的复合图形组合能实现的方式也只有图形相加，定义多个clippath 实现的也是图形相交，并不能实现图形相减。
mask就厉害了，它有主要两大功能，一是可以使用path,这意味着任意图形都能通过它实现，二是透明度，它的裁剪是通过颜色来实现的黑色为不可见，白色为可见，黑与白之间的颜色会被映射成透明度实现区域的可见渐变。
它可以实现任意的图形相加，相交，相减，通过图形颜色的定义，还可以实现单一曲线或者不规则路径的裁剪。
clip-path 和mask 在svg各自的实现方式
<defs>
<mask id="maskd">
<circle cx="100" cy="100" r="50" fill="#fff" stroke="transparent" stroke-width="20"></circle>
<circle cx="100" cy="100" r="40" fill="#000" stroke="transparent" stroke-width="20"></circle>
<rect width="100" height="400" x="0" fill="#000"></rect>
</mask>
<mask id="maskdd">
<path d="M0 50,50 100" stroke="white" stroke-width="20" />
</mask>
<clipPath id="clipd">
<rect width="100" height="400" x="100" clip-path="url(#clipdd)"></rect>
</clipPath>
</defs>
在css中的调用（使用定义的id调用）
clip-path: url(#clip);
mask: url(#c1ip);
在svg中的调用（在对应标签里使用id调用）
clip-path="url(#clipd)"
mask="url(#maskdd)"
这两个的和其他属性的结合动效
圆环渐变进度条，不规则形状外框切换都可以沿用这样的思路
结束语
看了很多资料发现css的蒙版资料没有整合在一起有点难受，加上项目需要就把他们之间联动起来讲一下。
