css边缘模糊制作

CSS 边缘模糊制作方法

使用 box-shadow 属性可以轻松实现边缘模糊效果。通过调整模糊半径和颜色透明度，可以创建柔和的边缘过渡。

.blur-edge {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

使用 filter: blur() 实现

filter 属性配合 blur() 函数可以直接对元素内容进行模糊处理。注意这会影响整个元素内容，而不仅是边缘。

.blur-content {
  filter: blur(5px);
}

渐变叠加技术

通过伪元素创建半透明渐变层，配合 filter: blur() 实现更自然的边缘模糊。

.gradient-blur {
  position: relative;
}
.gradient-blur::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(
    to right, 
    rgba(255,255,255,0), 
    rgba(255,255,255,1), 
    rgba(255,255,255,0)
  );
  filter: blur(10px);
  z-index: -1;
}

SVG 模糊滤镜

创建可复用的 SVG 模糊滤镜，通过 CSS 引用实现高性能的边缘模糊效果。

<svg style="display:none;">
  <filter id="blur">
    <feGaussianBlur stdDeviation="5"/>
  </filter>
</svg>

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

多重阴影叠加

通过叠加多个不同参数的 box-shadow 创建更复杂的边缘模糊效果。

.multi-shadow {
  box-shadow: 
    0 0 5px rgba(0,0,0,0.3),
    0 0 10px rgba(0,0,0,0.2),
    0 0 15px rgba(0,0,0,0.1);
}