纯 CSS 实现缕空遮罩层

需求 有很多网页在做引导时,遮罩层做成了缕空效果,最近我也遇到一个这样的需求,如图: 实现 常见方法 最容易想到的方法是切图,这个不用解释了。 在网上找

需求

有很多网页在做引导时,遮罩层做成了缕空效果,最近我也遇到一个这样的需求,如图:

image

实现

常见方法

最容易想到的方法是切图,这个不用解释了。

在网上找到的大部分做法都是用边框,那么我们来看一下边框怎么实现这个效果。

<div class="mask">div>.mask {position: absolute;top: -1647px; // 由于边框宽度太大right: -1756px;filter: blur(15px);border-radius: