CSS 背景过滤器透明模糊，边缘平滑

Posted 2023-02-25

【中文标题】CSS 背景过滤器透明模糊，边缘平滑

【英文标题】：CSS backdrop-filter transparent blur with smooth edges

【发布时间】：2021-06-25 18:07:30

【问题描述】：

目前我有一个简单的创建透明模糊效果的 css：

width: 300px;
height: 300px;
position: absolute;
background-color: rgba(30, 30, 30, 0.7);
-webkit-backdrop-filter: blur(3px);

问题是这会导致硬边框边缘。我需要的是有一个柔软/褪色的顶部边框，透明度完好无损。

这里提出了一个类似的问题，但它是针对 Flutter 而不是 CSS： How to clip the BackdropFilter with smooth edges?

我的问题是，如何在保持透明模糊效果不变的同时拥有平滑/褪色的顶部边框？这将用于将滚动的固定移动页脚，因此我不能使用占位符图像。

谢谢！

【问题讨论】：

你找到答案了吗？

不，我必须使用带有深色页脚区域的透明渐变叠加来实现这一点。

【参考方案1】：

我不是 css 专家，但我认为 box-shadow 属性会使边缘变软。

box-shadow: 0px -2px 2px rgba(34,34,34,0.6);

这将使顶部边缘变得模糊，您可以根据需要降低透明度。

【讨论】：

我试过直接给目标元素添加一个盒子阴影，但问题是盒子阴影没有模糊效果，只有一个透明的盒子阴影。