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);

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