使用 CSS backdrop-filter 实现透明模糊带有平滑边缘

Question

5

目前我有这个CSS，它只是创建了一个透明的模糊效果：

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

问题在于这会导致一个硬边缘。我需要的是一个顶部柔和/渐变的边框，同时保持透明度。

这里有一个类似的问题，但是它是针对Flutter而不是CSS：如何剪切具有平滑边缘的BackdropFilter？我的问题是，我如何在保持透明模糊效果的同时拥有一个柔和/渐变的顶部边框？这将用于一个固定的移动页脚，将随着滚动而滚动，因此无法使用占位符图像。

谢谢！

- user2028856

你找到答案了吗？ - Dettlaff

不，我必须使用透明的渐变叠加层和变暗的页脚区域来实现这一点。 - user2028856

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shaikh Aejaz Ahmed · Answer 1

虽然我不是CSS专家，但我认为box-shadow属性可以使边缘变得柔和。

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

这将会产生一个模糊的顶部边缘，您可以根据需要降低透明度级别。