使用方法
- 选择一个预设，或调整第一层的偏移、模糊、扩展、颜色和透明度。
- 添加更多图层，营造更自然的立体感；也可以勾选“内阴影”。
- 调整预览背景和方块颜色以匹配你的设计，然后复制 CSS。
工作原理
box-shadow 的每个图层依次接受：水平偏移、垂直偏移、模糊半径、扩展半径和颜色；前面还可以加上 inset。正偏移会使阴影向右、向下移动。模糊会柔化阴影边缘，且不能为负值；扩展会在模糊前放大（正值）或缩小（负值）阴影。多个图层用逗号分隔，最先绘制的是最上层。
逼真的立体效果通常会将一个小而清晰的阴影与一个更大、更柔和、透明度较低的阴影叠加，“凸起”预设就是这样设置的。颜色使用 rgba() 表示，以明确指定透明度。阴影会沿着元素的 border-radius 绘制，且不占用布局空间，因此不会让其他元素移动。
如果许多元素都使用非常大的模糊值，低端手机上的滚动可能会变慢。若要制作阴影动画，通常让一个预先带有阴影的伪元素淡入，比直接为 box-shadow 添加动画更流畅。
示例
浅色页面上的卡片
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); 可为卡片营造清晰的边缘和柔和的悬浮感。
不影响布局的焦点环
在品牌色图层中设置 0 偏移、0 模糊和 3px 扩展，可在按钮周围绘制实心圆环。与边框不同，它不会改变元素的尺寸。
按下状态的输入框
inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) 可让文本框看起来略微内凹。
常见问题
box-shadow 和 filter: drop-shadow() 有什么区别？
box-shadow 沿元素的边框盒和 border-radius 绘制，并支持扩展和内阴影。drop-shadow() 会沿可见形状绘制阴影，包括 PNG 或 SVG 图片中的透明区域，但不支持扩展或内阴影。
为什么阴影被裁切了？
设置了 overflow: hidden 的父元素会裁切超出其边界的内容，包括阴影。可以给父元素添加内边距，或移除 overflow 规则。
应该使用多少个图层？
大多数界面使用一到两层就够了。增加图层可以让阴影更柔和，但绘制成本也会略有增加，在长列表中尤其明显。
隐私
CSS 在浏览器中生成，不会上传或存储任何内容。