css边缘模糊制作

使用 box-shadow 实现边缘模糊

通过 box-shadow 属性可以创建柔和的边缘模糊效果。调整模糊半径和扩散半径可以控制模糊程度：

.element {
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3);
}

第四个参数（10px）控制阴影扩散程度，第三个参数（20px）控制模糊强度。

使用 backdrop-filter 实现背景模糊

适用于需要模糊元素背后内容的场景：

.element {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5); 
}

blur() 函数内的数值决定模糊程度，配合半透明背景色效果更佳。

使用 filter 模糊整个元素

filter 属性可对整个元素应用模糊效果：

.element {
  filter: blur(5px);
}

注意这会模糊元素内容而不仅是边缘，适合需要整体模糊效果的场景。

SVG 模糊滤镜实现高级效果

通过 SVG 滤镜可以实现更复杂的边缘模糊：

<svg>
  <filter id="blur">
    <feGaussianBlur stdDeviation="5" />
  </filter>
</svg>

<style>
  .element {
    filter: url(#blur);
  }
</style>

渐变蒙版实现边缘淡化

结合透明渐变和 mask 属性可以创建边缘淡化效果：

.element {
  mask: linear-gradient(
    to right, 
    transparent,
    white 20%,
    white 80%,
    transparent
  );
}

多层阴影增强效果

叠加多层 box-shadow 可以创建更自然的边缘模糊：

.element {
  box-shadow: 
    0 0 5px 2px rgba(0,0,0,0.1),
    0 0 10px 5px rgba(0,0,0,0.1),
    0 0 15px 10px rgba(0,0,0,0.1);
}