box-shadow支持逗号分隔多层阴影，从前到后叠加，无需嵌套元素；外阴影默认、内阴影需inset；典型卡片用0 4px 12px -2px rgba(0,0,0,0.1)和inset 0 1px 2px rgba(0,0,0,0.05)组合。
box-shadow 一次写多个值就能叠加阴影
CSS 的 box-shadow 本身支持用逗号分隔多个阴影声明，浏览器会从前往后逐层绘制——前面的阴影在上层，后面的在下层。这不是“多次设置覆盖”，而是一次声明里的多层叠加，性能无额外开销。
常见错误是以为要套两层元素（比如外层 div 加外阴影、内层加内阴影），其实纯 CSS 就能搞定。
- 每个阴影格式为：
offset-x offset-y blur-radius spread-radius color - 内阴影必须显式加上
inset关键字，否则默认是外阴影 - 外阴影和内阴影可以混写在同一行
box-shadow中，顺序决定图层上下关系
卡片内外阴影的标准写法（含参数解释）
典型卡片需要：一层柔和的外投影模拟悬浮感 + 一层细微内阴影增强边缘立体感。关键不是数值多大，而是 blur 和 spread 的配合是否自然。
示例：
立即学习“前端免费学习笔记（深入）”；
box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.1), /* 外阴影：轻微偏移、适度模糊、负 spread 收紧范围 */ inset 0 1px 2px rgba(0, 0, 0, 0.05); /* 内阴影：极小偏移+弱模糊，只压亮边 */
-
0 4px 12px -2px中的-2px是 spread-radius，负值让外阴影更聚拢，避免虚边过重 -
inset 0 1px的1px偏移是为了避开 border 边界，防止内阴影被裁切（尤其当卡片有border时） - 两个阴影的透明度要错开：
0.1和0.05，避免叠加后发灰
border-radius 和 box-shadow 的兼容性坑
圆角卡片加阴影时，外阴影会按原始矩形区域渲染，导致圆角处阴影“溢出”或生硬。这不是 bug，是规范行为——box-shadow 不受 border-radius 裁剪。
- 解决方法只有两个：
overflow: hidden（简单但可能裁掉子元素内容），或改用clip-path（更精准但 Safari 旧版不支持） - 如果卡片有
border，且用了inset阴影，注意border会挡住部分内阴影，建议把inset的spread-radius设为正值微调（如inset 0 0 2px 1px） - 不要依赖
filter: drop-shadow()替代box-shadow来绕过圆角问题——它不支持inset，也无法控制 spread
深色模式下 box-shadow 的颜色适配
直接写死 rgba(0, 0, 0, 0.1) 在深色背景上会变突兀甚至不可见。别指望自动反转，得主动处理。
- 用
CSS 自定义属性 + prefers-color-scheme分离明暗色值： :root { --shadow-out: rgba(0, 0, 0, 0.1); --shadow-in: rgba(0, 0, 0, 0.05); }@media (prefers-color-scheme: dark) { :root { --shadow-out: rgba(255, 255, 255, 0.08); --shadow-in: rgba(255, 255, 255, 0.03); } }- 然后在卡片中写：
box-shadow: var(--shadow-out), inset var(--shadow-in);
最易被忽略的是：内阴影在深色模式下容易过亮，导致“发光边”假象；实际需要比外阴影更低的透明度，而不是等比例调整。
