探索CSS中的模糊效果

这个演示展示了CSS中不同类型的模糊效果，包括普通模糊、高斯模糊和毛玻璃效果。通过调整每个示例下方的滑块，可以实时查看参数变化对效果的影响。

普通模糊效果

1. 基础模糊效果 - blur()

使用 filter: blur() 应用基本模糊效果，可以对任何HTML元素应用模糊。

.element {
  filter: blur(5px);
}
模糊效果

2. 图片模糊效果

对图片应用模糊效果可以创造特殊的视觉体验，常用于背景图片或需要突出前景内容的场景。

.blurred-image {
  filter: blur(3px);
}
测试图片

高斯模糊效果

1. 高斯模糊半径变化

高斯模糊通过调整半径值控制模糊程度，值越大模糊效果越明显，常用于创造深度感和层次感。

.gaussian-blur {
  filter: blur(8px);
}
高斯模糊

2. 文本阴影模糊

使用 text-shadow 属性创建带模糊效果的文本阴影，可以增强文本的可读性和视觉吸引力。

.text-with-shadow {
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
模糊阴影文本

毛玻璃效果

1. 基础毛玻璃效果

使用 backdrop-filter 创建毛玻璃效果，通常与半透明背景配合使用，创造现代感的UI设计。

.frosted-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}
测试图片
毛玻璃效果
透过模糊看到背景

2. 毛玻璃卡片组件

毛玻璃效果常用于卡片组件，创造现代感和层次感，是当前流行的UI设计趋势之一。

.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
测试图片
毛玻璃卡片

这是一个使用毛玻璃效果的卡片组件，常用于现代UI设计中，创造深度感和层次感。