在CSS中，可通过filter属性中的blur()函数为元素设置模糊效果，语法为filter: blur(像素值)，如filter: blur(5px)表示模糊半径为5像素，值越大模糊越明显，若需模糊元素背后的内容（如毛玻璃效果），则使用backdrop-filter属性，语法为backdrop-filter: blur(像素值)，常用于模态框、卡片等场景提升视觉层次，两者均需注意浏览器兼容性，backdrop-filter在较新版本浏览器中支持较好，合理运用模糊效果可增强界面设计感，避免过度使用导致内容可读性下降。
CSS实现盒子模糊效果：box-shadow与backdrop-filter的应用指南
在网页设计中，模糊效果常用于营造层次感、增强视觉焦点，或打造柔和的界面氛围，当我们需要对"盒子"（即块级元素，如卡片、弹窗、导航栏等）应用模糊效果时，CSS提供了多种方法，本文将详细介绍如何通过box-shadow和backdrop-filter属性为盒子设置模糊度,并解析其适用场景与注意事项。
什么是盒子模糊效果？
盒子模糊效果指的是对块级元素的背景或阴影应用模糊处理，使其呈现"朦胧感"，半透明的毛玻璃卡片、悬浮阴影的柔和扩散、弹窗背景的虚化等，都属于盒子模糊的常见应用，通过CSS，我们可以轻松实现这类效果，无需依赖图片资源,从而提升页面的灵活性与性能。
核心方法1：使用backdrop-filter实现背景模糊
backdrop-filter是CSS3中专门用于模糊元素背后内容的属性，是实现"毛玻璃效果"的核心工具，它不会模糊元素本身，而是对元素下方的所有元素（包括背景图、颜色、其他DOM元素等）进行模糊处理，再与元素自身的背景叠加,形成通透的模糊效果。
语法与参数
backdrop-filter: blur(像素值) | brightness(百分比) | contrast(百分比) | 其他滤镜函数;
最常用的blur()函数用于设置模糊度，单位为px、rem等，值越大模糊程度越高。backdrop-filter: blur(10px);表示对背景内容进行10像素的模糊处理。
使用条件与示例
backdrop-filter生效需要满足两个条件：
- 元素必须有非透明背景（可以是纯色、半透明色或渐变）；
- 元素不能是
<body>或<html>根元素（需通过包裹元素实现）。
示例：半透明毛玻璃卡片
<div class="glass-card"> <h3>毛玻璃卡片</h3> <p>这是通过backdrop-filter实现的背景模糊效果。</p> </div>
.glass-card {
width: 300px;
padding: 20px;
background: rgba(255, 255, 255, 0.3); /* 半透明背景 */
border-radius: 10px;
backdrop-filter: blur(10px); /* 核心：背景模糊 */
-webkit-backdrop-filter: blur(10px); /* 兼容WebKit内核浏览器 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
效果说明：.glass-card的背景半透明，且背后的页面内容（如背景图、文字）会被模糊10像素,形成通透的毛玻璃质感。
兼容性注意事项
backdrop-filter在现代浏览器（Chrome、Firefox、Edge、Safari）中已广泛支持，但旧版浏览器（如IE11）不支持，为确保兼容性，建议添加-webkit-前缀（如-webkit-backdrop-filter），并在关键项目中提供降级方案（如纯色背景替代模糊效果）。
性能优化技巧
- 避免过度模糊：过高的模糊值会增加GPU负担，建议控制在10-20px之间
- 限制应用范围：只在必要的元素上使用，避免大面积应用
- 使用硬件加速：确保元素有
transform或opacity属性触发GPU加速
核心方法2：使用box-shadow实现阴影模糊
与backdrop-filter不同，box-shadow主要用于为元素添加阴影，其阴影扩展半径（blur-radius）参数可以控制阴影的模糊程度，从而实现"柔和阴影"效果，这种方法不会影响元素背景或内容,仅对阴影进行模糊处理。
语法与参数
box-shadow: h-offset v-offset blur-radius spread-radius color;
h-offset：阴影水平偏移（正数向右，负数向左）；v-offset：阴影垂直偏移（正数向下，负数向上）；blur-radius：阴影模糊半径（值越大，阴影边缘越模糊，模糊效果的核心参数）；spread-radius：阴影扩散半径（可选，正数扩大阴影，负数缩小阴影）；color：阴影颜色（建议使用rgba()设置透明度，增强柔和感）。
示例：悬浮柔和阴影卡片
<div class="shadow-card"> <h3>柔和阴影卡片</h3> <p>这是通过box-shadow的blur-radius实现的阴影模糊效果。</p> </div>
.shadow-card {
width: 300px;
padding: 20px;
background: white;
border-radius: 10px;
/* 水平偏移0px，垂直偏移8px，模糊半径16px，扩散半径0px，颜色带透明度 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease; /* 悬浮时增强阴影 */
}
.shadow-card:hover {
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* 悬浮时模糊半径增大 */
}
效果说明：.shadow-card默认有一个柔和的灰色阴影，模糊半径为16px，阴影边缘自然扩散；悬浮时阴影模糊半径增大,增强立体感。
创意应用技巧
-
多层阴影：组合多个
box-shadow创建更丰富的效果box-shadow: 0 0 20px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.15);
-
彩色阴影：使用渐变色彩创造梦幻效果
box-shadow: 0 8px 32px rgba(100, 100, 255, 0.3);
-
内阴影：使用
inset关键字创建内部模糊效果box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
两种方法的对比
| 属性 | 作用对象 | 影响范围 | 适用场景 | 性能影响 |
|---|---|---|---|---|
backdrop-filter |
元素自身背景 | 元素背后的所有内容 | 毛玻璃效果、背景虚化 | 较高（GPU密集） |
box-shadow |
元素阴影 | 仅阴影区域 | 柔和阴影、悬浮效果 | 较低 |
进阶技巧：结合filter模糊元素自身
若需模糊元素内部内容（如图片、文字），可使用filter属性，注意，filter会模糊元素及其所有子元素,而不仅仅是背景。
.blur-content {
filter: blur(2px);
}
实际应用场景
-
图片模糊效果：
.blur-image { filter: blur(5px); transition: filter 0.3s ease; } .blur-image:hover { filter: blur(0); /* 悬浮时恢复清晰 */ }
