box-shadow语法为h-offset v-offset blur-radius spread-radius color inset，前两项必填；单边阴影靠偏移与扩散控制；多阴影用逗号分隔但需注意性能；不生效常因透明背景、overflow隐藏或颜色错误。
box-shadow 的基本语法和参数顺序
直接写 box-shadow 时，必须按固定顺序提供 2–6 个值，缺一不可（除非用 inset 或颜色省略）。标准写法是：box-shadow: h-offset v-offset blur-radius spread-radius color inset;
其中前两个值（h-offset 和 v-offset）是必需的，其余可选。负值会让阴影往左/往上偏移；blur-radius 不能为负，0 表示无模糊；spread-radius 为正时扩大阴影面积，为负时收缩。
常见错误：把颜色写在 blur-radius 前面，或漏掉单位（如写 10 而不是 10px），浏览器会直接忽略整条声明。
单边阴影怎么实现（比如只想要底部阴影）
纯 CSS 没有 “bottom-shadow” 这种属性，但可以通过控制偏移和扩散来模拟。关键思路是让水平偏移为 0、垂直偏移为正、模糊半径适中、扩散半径为 0 或略负，再配合透明度降低干扰。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 底部阴影常用写法：
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); - 如果阴影太“虚”盖住下边框，把
blur-radius减小，或加负的spread-radius（如-2px）收窄它 - 别用
inset——那是内阴影，方向反了 - 注意父容器 overflow: hidden 可能裁掉阴影，需要留白或设
padding
多个阴影叠加的写法和性能影响
box-shadow 支持逗号分隔写多个阴影，比如卡片浮起+内凹效果：box-shadow: 0 2px 8px rgba(0,0,0,0.1), inset 0 -2px 4px rgba(0,0,0,0.05);
每多一层阴影，渲染开销就略增一点，尤其在滚动区域里大量使用（如列表项）。真实项目中建议：
- 不超过 2 层外阴影 + 1 层内阴影
- 避免在
:hover动画里动态改box-shadow的所有参数，只动v-offset或opacity更流畅 - 移动端慎用大模糊值（如 >12px），部分低端 Android 渲染卡顿
box-shadow 不生效的几个典型原因
写对了语法却没看到阴影？大概率是这些地方卡住了：
- 元素背景是透明的，且父级也是透明——阴影被“透”掉了，加个
background-color: white;看看 - 用了
transform: scale(0.99);之类触发了硬件加速层，导致阴影被裁剪，加will-change: transform;或换用margin模拟缩放 - 元素设置了
overflow: hidden且阴影超出边界，检查盒模型尺寸和 padding - 阴影颜色是全透明
rgba(0,0,0,0)或写成了#00000000（不被所有浏览器支持）
调试时最简单的方法：临时加上 box-shadow: 0 0 0 4px red;，确认是否真没渲染，还是只是太淡没看见。
