如何为圆形div添加渐变弱化CSS backdrop-filter模糊边缘的突兀感？

你可以通过CSS的**蒙版（mask）**属性，给这个圆形div添加径向渐变蒙版，让模糊效果从中心到边缘逐渐衰减，从而弱化突兀的边缘。

修改后的完整CSS代码如下：

z-index: 9999;
position: absolute;
transform: translate(-50%,-50%);
height: 150px;
width: 150px;
border-radius: 50%;
pointer-events: none;

backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
/* 径向渐变蒙版，控制模糊效果的衰减范围 */
-webkit-mask: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
mask: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);

原理说明 #

• mask属性通过径向渐变控制元素的可见度：中心区域（60%半径内）保持完全不透明，模糊效果正常显示；从60%到100%半径的区域，透明度从1逐渐降到0，模糊效果也随之逐渐消失，边缘过渡更自然。
• 你可以调整渐变中的百分比数值（比如把60%改成70%），来控制清晰区域的大小和过渡的快慢，找到最适合的视觉效果。
• 如果需要更平滑的过渡，可以增加渐变的中间节点，比如：

  mask: radial-gradient(circle, rgba(0,0,0,1) 50%, rgba(0,0,0,0.7) 75%, rgba(0,0,0,0) 100%);
  

内容的提问来源于stack exchange，提问作者Mez