CSS的box-shadow属性怎么添加阴影效果？
2026-10-18 08:13:08
CSS的box-shadow属性通过设置水平偏移、垂直偏移、模糊半径、扩散半径、颜色及可选的inset关键字来定义阴影形态，可创建外阴影或内阴影效果，并支持多重阴影叠加。
一、基础语法与参数详解box-shadow属性通常接受以下五个值（顺序可调整但约定俗成）：
- offset-x（水平偏移）：正值向右，负值向左。
- offset-y（垂直偏移）：正值向下，负值向上。
- blur-radius（模糊半径）：值越大阴影越模糊，0则边缘锐利。
- spread-radius（扩散半径）：正值扩大阴影，负值缩小阴影。
- color（颜色）：支持任何CSS颜色值（如#000、rgba(0,0,0,0.5)）。
- inset（可选关键字）：添加后阴影变为内阴影，默认无此关键字时为外阴影。
- 外阴影：
渲染在元素边框外部，使元素呈现“浮起”效果。
示例：.button-raised { box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);}
- 内阴影（inset）：
渲染在元素内容区域内部，边框之内，模拟“凹陷”效果。
适用场景：按钮按下状态、内边框、纹理光泽等。
示例：.button-pressed { box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);}
通过逗号分隔多个阴影定义，可实现复杂视觉效果。浏览器按声明顺序渲染，第一个阴影在最上层。
- 应用场景：
多方向光照：模拟不同光源增强立体感。
边框效果：用无模糊阴影（blur-radius: 0）模拟多层边框。
光晕/霓虹灯：结合不同模糊半径和扩散半径的阴影。
复杂立体感：混合inset与外阴影。
- 示例：模拟多层边框的卡片.multi-shadow-card { box-shadow: 0 0 0 5px #f0f0f0, /* 第一层：浅灰色外边框 */ 0 0 0 10px #ccc, /* 第二层：深灰色外边框 */ 5px 5px 15px rgba(0, 0, 0, 0.4); /* 第三层：常规阴影 */}
性能问题：
重绘与回流：阴影属性变化（尤其是动画中）会触发频繁重绘，模糊半径大或元素多时计算量显著增加。
GPU加速：现代浏览器通常对box-shadow进行GPU加速，但过度复杂阴影仍可能回退到CPU渲染。
动画优化：使用transform（如translateZ(0)）或will-change: box-shadow提升动画性能。
兼容性挑战：
老旧浏览器：IE8及更早版本不支持box-shadow，但现代浏览器均兼容。
前缀问题：无需添加-webkit-或-moz-等私有前缀。
可访问性：阴影颜色与背景对比度不足可能影响可读性，需确保辅助性视觉元素不干扰核心内容。
- 基础阴影：优先使用简洁参数（如box-shadow: 2px 2px 5px rgba(0,0,0,0.2);）。
- 内阴影：通过inset模拟按钮按下状态时，可结合背景渐变增强真实感。
- 多重阴影：控制阴影数量（建议不超过3层），避免性能损耗。
- 性能测试：使用浏览器开发者工具（如Chrome Performance面板）分析阴影对渲染性能的影响。
通过合理运用box-shadow的参数和特性，可以高效实现丰富的视觉效果，同时兼顾性能与兼容性。
热门标签
