css边缘模糊制作

使用 box-shadow 实现边缘模糊

通过 box-shadow 属性可以快速为元素添加边缘模糊效果。调整模糊半径（blur）参数控制模糊程度，spread 参数控制阴影扩散范围。

.element {
  box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.3); /* 水平偏移 垂直偏移 模糊半径 扩散范围 颜色 */
}

结合 filter: blur() 模糊边缘

filter 属性中的 blur() 函数可直接模糊元素内容，但需注意此方法会模糊整个元素内容，而非仅边缘。通常配合 overflow: hidden 限制模糊范围。

.container {
  overflow: hidden;
}
.blur-edge {
  filter: blur(5px);
  margin: -5px; /* 抵消模糊导致的边缘溢出 */
}

使用伪元素创建渐变遮罩

通过伪元素叠加线性渐变背景，实现边缘过渡模糊的视觉效果。此方法适合需要渐隐效果的场景。

.element {
  position: relative;
  overflow: hidden;
}
.element::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
}

SVG 模糊滤镜（feGaussianBlur）

通过 SVG 滤镜实现更复杂的边缘模糊效果，适用于不规则形状。需定义 SVG 滤镜后通过 CSS 引用。

<svg width="0" height="0">
  <filter id="blur-edge">
    <feGaussianBlur stdDeviation="5" edgeMode="duplicate" />
  </filter>
</svg>

.element {
  filter: url(#blur-edge);
}

注意事项

• box-shadow 和伪元素方法性能较好，适合简单场景。
• filter: blur() 可能影响渲染性能，慎用于频繁动画或复杂页面。
• SVG 滤镜兼容性较好，但需额外 HTML 结构。