css模糊制作

CSS模糊效果实现方法

CSS提供了多种方式实现模糊效果，适用于背景、图片或整个元素。以下是常见的实现方法：

filter: blur() 属性 使用CSS的filter属性配合blur()函数可以快速创建模糊效果。数值越大模糊程度越高，单位可以是px或rem。

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

backdrop-filter 属性 适用于元素背景的模糊效果，不影响前景内容。适合制作磨砂玻璃效果。

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

SVG模糊滤镜 通过SVG滤镜可以实现更复杂的模糊效果，需在HTML中定义滤镜并在CSS中引用。

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

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

多重阴影模拟模糊 通过box-shadow的多重叠加可以模拟边缘模糊效果。

.shadow-blur {
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.3);
}

性能优化建议

• 对需要动画的模糊效果使用will-change: filter提升性能
• 避免在大面积元素上使用高强度模糊
• 考虑使用transform: translateZ(0)触发硬件加速

浏览器兼容方案

为兼容旧版浏览器，建议添加前缀并准备降级方案：

.blur-fallback {
  -webkit-filter: blur(2px);
  filter: blur(2px);
  /* 非模糊状态下的替代样式 */
  @supports not (filter: blur(1px)) {
    opacity: 0.8;
  }
}

实际应用中可根据需求组合这些方法，如同时使用backdrop-filter和半透明背景创建更逼真的磨砂玻璃效果。