Jym好😘，我是珑墨，今天给大家分享CSS实现可配置阴影模糊效果，嘎嘎的😍，看下面。
设置元素阴影在CSS中相当简单：声明属性，设置阴影偏移量，定义阴影度，并为其提供颜色。这是为原本扁平化的设计增加深度的好方法！本文从阴影中汲取灵感，只是用模糊效果代替了阴影。box-shadow``backdrop-filter
想象一下，对于模糊效果，一个元素的背景在该元素周围模糊，逐渐降低模糊的强度。box-shadow``box-shadow
如果我们有一个属性，或者某种关键字，我们可以设置阴影的方式，那就太奈斯了。不幸的是，CSS 没有这样的属性。但是由于 CSS 很灵活，我们仍然可以通过组合一些 CSS 功能来获得效果并对其进行破解。box-blur``blur``box-shadow``inset
给jym先上码子，可拖拽圆形移动来感觉下！👀
code.juejin.cn/pen/7338667…
从现在开始，我将向你们展示的是我创造这种效果的思考过程。有时，我发现知道即将发生的事情比蜿蜒曲折的叙述更容易。所以，对于那些像我一样想直接进入这个过程的人来说，这就是我的方法。
一、从before开始
该效果的处理方式是将其应用于某个元素的伪元素，例如某些弹出窗口/对话框/弹出窗口/工具提示。这些是这种效应的常见“目标”。我认为在这里使用伪元素是一个很好的方法，因为这意味着我们可以在技术上将样式范围限定为伪元素，并在没有任何 HTML 更改的情况下重新利用对其他元素的影响。::before
你可以为元素提供一个类，无论您喜欢什么尺寸，在其中插入内容和其他子元素，或者使用完全不同的元素。
二、定位伪元素
我们希望伪元素占据我们用于此特定演示的元素的整个区域。我们不仅希望它覆盖整个区域，甚至溢出它，因为这建立了可见区域，它保持了模糊效果，所以它会向外延伸。::before``<div>
::before {
content: '';
/* 确保父元素至少处于包含伪元素的相对位置。 */
position: absolute;
/* 模糊大小应该小于“0”，这样它就会向外延伸。 */
inset: -100px;
/* 这个图层位于父元素和页面背景之间。*/
/* 确保这个值比父元素的“z-index”低1。 */
z-index: -1;
}
代码注释阐明了关键部分。必须为该属性设置一个空字符串，以便content[::before]，然后我们通过给它绝对定位来将其从文档流中取出。这允许我们确定元素的位置，并最终像在属性上一样设置模糊效果方向——只是我们用来控制它的大小。我们想要一个负值，该值越低，效果越远。inset``box-shadow``inset``inset
到目前为止，我们已经为这种效果奠定了基础。
三、使用透明渐变
从技术上讲，渐变是由浏览器生成的图像，可以用作 CSS 蒙版来隐藏元素的某些部分以创建各种形状。
当涉及到渐变遮罩时，透明度是关键。透明度允许我们逐渐隐藏元素的某些部分，从而产生淡入或淡出的错觉。
在这种情况下，这当然是完美的，因为我们希望效果更强，更接近物体，并且随着物体越来越远，强度会逐渐减弱。
我们将使用两个渐变：一个是水平的，另一个是垂直的。我之所以选择这条路线，是因为它模仿了一个粗糙的矩形形状，向边缘逐渐淡出。
正如我所说，透明度是关键。两个渐变都开始，然后过渡到直到结束之前，它们回到那里淡出。请记住，这些渐变是蒙版而不是背景图像，因此它们是在属性上声明的，该属性控制应呈现的像素及其不透明度。transparent``black``transparent``mask
mask:
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
- 垂直梯度 （
to top） 创建从底部的透明到中间的黑色，然后又回到顶部的透明的淡入淡出。 - 水平梯度 （
to left） 产生从右侧的透明到中间的黑色，然后又变回左侧的透明的淡入淡出。
这种双梯度方法对黑色区域进行定位，使它们合并，从而创建圆形形状的粗略基线，该基线将在下一步中进行细化。该属性最好声明为先加前缀，然后不加前缀，以涵盖更多浏览器的支持：遮罩
-webkit-mask:
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
mask:
linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 25% 75%, transparent 100%);
四、使用 mask-composite 属性进行优化
mask-composite属性是 CSS 遮罩模块的一部分，支持对遮罩内容的混合进行像素级控制，从而实现复杂的合成。
source-in此属性的值对于我们所追求的效果非常有用，因为它告诉浏览器只保留蒙版的重叠区域，因此只有包含两个（上面提到的）渐变的像素才会被渲染。这将锁定一个矩形形状，然后可以将其应用于任何没有或中等弯曲角的 DOM 元素。border-radius
五、逐渐模糊背景
现在我们有了一个可以使用的基本壳子，我们需要做的就是使用它。CSS 属性可以使用以下函数模糊呈现在元素“后面”的任何内容：backdrop-filter``blur()
::before {
backdrop-filter: blur(10px);
}
该值越大，模糊越强烈。我是任意使用的。事实上，我们可以稍后对这些东西进行变换，以使实现更加灵活且易于配置。10px。
Safari浏览器需要一个前缀的兼容才能起效：backdrop-filter
::before {
-webkit-backdrop-filter: blur(10px); /* Safari */
backdrop-filter: blur(10px);
}
六、设置阴影
我认为，添加一个轻微的半不透明的黑色来覆盖模糊区域，会给效果带来一点额外的深度。唯一的问题是，你需要将其添加到元素本身中，而不是将其添加到伪元素中：box-shadow``::before
div {
box-shadow: 0 0 40px #00000099;
}
不过，这完全是可选的。
七、最终css码子如下
最终效果如图所示：
将上面所有内容组合在一起，CSS码子如下。
/* 可以在它所应用的元素的::前的pseudo上设置。 */
::before {
content: '';
/* 这个图层位于一些元素和它的背景之间。 */
position: absolute;
/* 不影响容器的内容。 */
z-index: -1;
/* 模糊大小应该小于“0”，这样它就会向外延伸。 */
inset: -100px;
/* 模糊效果 */
-webkit-backdrop-filter: blur(10px); /* Required for safari */
backdrop-filter: blur(10px);
/*蒙版淡化模糊效果，所以它变得更弱。* /
/*朝向边缘，远离容器盒子。* /
/*(填充颜色是无关的，所以使用“红色”，因为它是最短的颜色名称。)*/
mask:
linear-gradient(
to top,
transparent 0%,
red 100px calc(100% - 100px),
transparent 100%),
linear-gradient(
to left,
transparent 0%,
red 100px calc(100% - 100px),
transparent 100%);
/*将合并上面的蒙版，所以只有重叠的像素被渲染。* /
/*创建了一个淡出蒙版的错觉。* /
mask-composite: intersect;
-webkit-mask-composite: source-in; /* Required for Safari */
}
好了，今天就分享到这里吧。
更多css大法，请看juejin.cn/column/7107…
感谢jym浏览本文，共同进步🤞，若有更好的观点，欢迎评论区讨论哈🌹。
原文链接：https://juejin.cn/post/7338628873134276660 作者：珑墨
