box-shadow参数顺序为水平偏移、垂直偏移、模糊半径、扩散半径（可选）、颜色；多层需逗号分隔于同一声明；伪元素承载更稳妥；推荐rgba()控透明度。
box-shadow 基本写法和参数顺序怎么记才不乱
记住 box-shadow 的四个关键值顺序：水平偏移、垂直偏移、模糊半径、扩散半径（可选），最后是颜色。漏掉前三个，阴影就出不来；颜色不写，默认是 black，但容易误以为“没生效”。
- 水平偏移为正：阴影往右；为负：往左
- 垂直偏移为正：阴影往下；为负：往上
- 模糊半径不能为负，设成
0就是硬边阴影 - 扩散半径为正会放大阴影范围，为负会收缩（但可能被裁剪，尤其在父容器
overflow: hidden时）
示例：box-shadow: 2px 4px 8px 0 #00000020 —— 这是最常用的安全组合，轻微下移+适度模糊，半透黑，不易压住文字。
多层阴影叠加时为什么只显示最后一层
因为 CSS 里多个 box-shadow 值必须写在**同一个声明里**，用逗号分隔。如果写了两行 box-shadow，后一行会直接覆盖前一行。
- 正确写法：
box-shadow: 0 2px 4px #000, 0 8px 16px #0002; - 错误写法：两行分别写
box-shadow: ...，第二行生效，第一行丢弃 - 多层阴影适合模拟真实光源（比如主光+环境光），但超过 3 层后性能开销明显上升，尤其在移动端滚动时易掉帧
box-shadow 在 transform 或 fixed 定位元素上消失或错位
这是常见视觉 bug，根本原因是 box-shadow 的渲染依赖于元素的“绘制上下文”——当元素被提升为合成层（比如加了 transform: translateZ(0) 或 position: fixed），阴影可能被裁剪或错位，尤其在 Safari 和旧版 Chrome 中。
- 检查父容器是否设置了
overflow: hidden，它会裁掉超出部分的阴影 - 给父容器加
will-change: transform或transform: translateZ(0)有时能修复，但别滥用，会强制创建图层，吃内存 - 更稳妥的做法：把阴影挪到伪元素上，例如用
::before绘制阴影，主体元素专注内容
示例：.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-shadow: 0 4px 12px #0002; z-index: -1; }
阴影颜色用 rgba 和 #hexa 有什么实际区别
表面上都是透明色，但 rgba(0,0,0,0.1) 和 #0000001a 渲染结果在部分浏览器（尤其是 Firefox）中不一致，因为十六进制 alpha 是按字节解释，而 rgba 是浮点计算，四舍五入逻辑不同。
- 开发阶段建议统一用
rgba()，语义清晰，调试时改透明度更直观 - 上线前若需极致压缩，可转成 hexa，但务必实测对比（特别是浅色背景上的细微阴影）
- 避免用
hsla()写阴影色——色相偏移在低饱和度下极难控制，容易出现意外灰绿或灰紫边
阴影不是越重越好，真正难的是让阴影“存在但不抢戏”，比如卡片 hover 时只加 2px 垂直偏移 + 6px 模糊，比全量加深更显轻盈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
