在常见的场景中，一张图片只能方形或者圆形展示，如果想要以不规则的通常都是通知 UI 小姐姐让她帮忙处理一下图片，然后直接用就好了；
但是小姐姐只会影响我敲代码的速度，等她处理图片我的代码都写好了，接下来我就带大家一起来看看各种遮罩处理方式。
所有场景的效果：
渐变背景 我们可以通过叠加渐变背景来实现遮罩效果，这种方式比较简单，但是需要注意的是渐变的方向和颜色，如果不合理会导致遮罩效果不理想。
/* 格子模糊效果 */ .container { background: repeating-linear-gradient(transparent, transparent 5px, #fff 5px, #fff 10px), repeating-linear-gradient(90deg, transparent, transparent 5px, #fff 5px, #fff 10px), url("p9-juejin.byteimg.com/tos-cn-i-k3…?"); background-size: 100% 100%; width: 500px; height: 600px; filter: blur(1px); }
/* 径向渐变 */ .container { background: repeating-radial-gradient(circle at 50% 50%, #fff 0, #fff 10px, transparent 10px, transparent 20px), url("p9-juejin.byteimg.com/tos-cn-i-k3…?"); background-size: 100% 100%; width: 500px; height: 600px; filter: blur(1px); } 用径向渐变的效果并不好，因为渐变就相当于一个图像的图层，你只能在上一个图层的基础上进行处理，而径向渐变的效果是从中心向外扩散的，然后应用在整个图片上，如果没有很好的创意，这种效果并不好看。
同时使用渐变背景，上面的透明只是图层的透明，而不是整个 dom 的透明，所以下面介绍 clip-path 的方式。
clip-path clip-path 是 CSS3 新增的属性，可以用来裁剪元素的显示区域，可以用来实现遮罩效果。
/* 圆形遮罩 */ .container { background: url("p9-juejin.byteimg.com/tos-cn-i-k3…?"); background-size: 100% 100%; width: 500px; height: 600px; clip-path: circle(50% at 50% 50%); } 上面只是一个简单的示例，先来详解一下 clip-path 的语法：
clip-path: < shape > | < url > | none ; shape：形状，可以是 inset()、circle()、ellipse()、polygon()、path() 等，具体可以参考 MDN。 url：引用一个 svg 的路径，可以通过 clip-path: url(#clip) 来引用一个 id 为 clip 的 svg。 clip-path 的效果是裁剪元素的显示区域，最关键的是裁剪区域可以是不规则的，这样用它来实现遮罩效果就很方便了，不过说它是遮罩好像有点勉强，不过没关系，能达到我们要的效果就行。
来演示一下 clip-path 的效果：
.container { background: url("p9-juejin.byteimg.com/tos-cn-i-k3…?"); background-size: 100% 100%; width: 500px; height: 600px; clip-path: path('m254.02022,200.61348c82.25288,-239.21342 404.52235,0 0,307.56012c-404.52235,-307.56012 -82.25288,-546.77354 0,-307.56012z'); } 上面的效果是用 path() 来实现的，path其实就是svg的路径，而且上面也提到了可以使用url() 来引用一个 svg ，所以我们可以使用 svg 来实现。
.container { background: url("p9-juejin.byteimg.com/tos-cn-i-k3…?"); background-size: 100% 100%; width: 500px; height: 600px; clip-path: url(#love); }
都用上了svg了，那么iconfont也就用上呀~~~.container { background: url("p9-juejin.byteimg.com/tos-cn-i-k3…?"); background-size: 100% 100%; width: 500px; height: 600px; clip-path: url(#medicalCare); }
