CSS 背景过滤器具有平滑边缘的透明模糊

Question

目前我有这个 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?

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

谢谢！

Answer 1

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

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

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