如何修改CSS为盒子边缘添加羽化模糊效果并实现毛玻璃背景？

要让盒子边缘呈现羽化模糊、与背景自然融合的毛玻璃效果，可通过添加伪元素配合模糊滤镜实现，以下是修改后的完整代码：

修改后的CSS #

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1625&q=80');
  background-size: cover;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(225, 225, 225, 0.1);
  backdrop-filter: blur(4px);
}

.box::before {
  content: '';
  position: absolute;
  inset: -20px; /* 控制羽化范围，数值越大边缘模糊区域越宽 */
  border-radius: inherit;
  background-color: rgba(225, 225, 225, 0.1);
  filter: blur(15px);
  z-index: -1;
}

对应的HTML #

<div class="wrap">
  <div class="box"></div>
</div>

关键修改说明 #

• 羽化边缘实现：给.box添加::before伪元素，通过inset: -20px让伪元素尺寸超出原盒子，搭配filter: blur(15px)生成模糊效果，同时继承原盒子的圆角，使边缘与背景自然过渡。
• 毛玻璃效果优化：调整backdrop-filter模糊值至4px增强背景模糊感，伪元素使用与盒子一致的半透明白色背景，保证羽化区域与盒子风格统一。
• 层级控制：伪元素设置z-index: -1，确保它在盒子下方，不会干扰后续添加的盒子内容。

你可根据需求调整inset和filter: blur()的数值，得到不同的融合效果。

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