Box Shadow生成器
CSS
Box-Shadow 语法参考
CSS box-shadow 属性为元素添加一个或多个阴影效果。语法格式：
box-shadow: [inset] <offset-x> <offset-y> [blur] [spread] <color>;
属性分解
| 值 | 说明 | 默认 |
|---|---|---|
offset-x | 水平偏移量，正值向右，负值向左 | 必需 |
offset-y | 垂直偏移量，正值向下，负值向上 | 必需 |
blur-radius | 模糊半径，值越大阴影越模糊柔和 | 0 |
spread-radius | 扩展半径，正值扩大阴影，负值缩小 | 0 |
color | 阴影颜色，支持 rgba() 设置透明度 | 文本颜色 |
inset | 将外阴影改为内阴影，常用于按压效果 | 无（外阴影） |
浏览器兼容性
box-shadow 获得所有现代浏览器的完整支持（Chrome 10+, Firefox 4+, Safari 5.1+, Edge 12+）。对于需要兼容旧版 WebKit 浏览器的项目，可添加 -webkit-box-shadow 前缀。如今大多数项目已无需添加前缀。
性能优化建议
- 对需要动画的阴影元素使用
will-change: box-shadow提示浏览器提前优化 - 大面积模糊阴影（blur > 50px）消耗较多 GPU 资源，移动端应谨慎使用
- 多层阴影叠加时性能开销会累积，建议层数控制在 3 层以内
- 如果阴影不变化，优先考虑使用伪元素 + 图片替代实时渲染的阴影
常见问题
box-shadow 和 drop-shadow 有什么区别？
box-shadow 作用于元素的矩形盒模型，即使元素有圆角或透明区域，阴影仍然是矩形的。filter: drop-shadow() 则跟随元素的实际可见形状（包括透明通道），适合给 PNG 图标或不规则形状添加阴影。
如何实现多层阴影叠加？
用逗号分隔多个阴影值即可：box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.1); 先写的层在最上面。多层柔和阴影比单层硬阴影更接近真实光照效果。
box-shadow 会影响页面布局吗？
不会。box-shadow 是纯视觉效果，不占据文档流空间，不影响元素尺寸或相邻元素的位置。但如果阴影扩展范围过大，可能会溢出父容器的可见区域（可用 overflow:hidden 裁剪）。
如何让阴影只出现在一个方向？
结合偏移量和负 spread 值可实现单向阴影。例如只显示底部阴影：box-shadow: 0 4px 6px -2px rgba(0,0,0,.2); 负 spread 收缩阴影范围，正 y-offset 使其只在底部可见。