box-shadow参数顺序必须为offset-x、offset-y、blur-radius、spread-radius、color、inset，前两个必填，inset须置末尾或开头；blur-radius≥0，spread-radius可为负以收缩阴影；多层阴影按逗号顺序从远到近渲染；父容器overflow会裁剪阴影。
box-shadow 的六个参数顺序不能错
写 box-shadow 时，参数顺序是硬性约定：必须是 offset-x、offset-y、blur-radius、spread-radius、color、inset。前两个必填，其余全可选，但位置一错就失效。
常见错误现象：box-shadow: 0 0 8px #000 inset 在某些旧版 Safari 里会解析失败——因为 inset 被当成了 color 值；正确写法是把 inset 放最后：box-shadow: 0 0 8px #000 inset，或放最前：box-shadow: inset 0 0 8px #000。推荐统一放末尾，逻辑更清晰。
浏览器不会报错，但阴影不显示，调试时容易卡住。建议直接复制标准模板起步：box-shadow: 0 2px 4px -1px rgba(0,0,0,0.1) inset;
blur-radius 和 spread-radius 的行为差异
blur-radius 必须 ≥ 0，负值会被忽略为 0；它只控制边缘虚化程度，不改变阴影面积大小。
立即学习“前端免费学习笔记（深入）”；
spread-radius 是唯一允许为负的长度参数，-2px 表示把整块阴影向内收缩 2px，常用于“压住”模糊导致的四角溢出。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 要干净的底部阴影？用
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1)，负 spread 把左右发散收回来 - 圆角元素加阴影时，不加负 spread 容易在弧角处漏光，视觉上像“毛边”
- 设
blur-radius为 0 时，阴影边缘锐利，适合做描边感或高对比场景
多重阴影不是叠加，而是分层绘制
逗号分隔的多组 box-shadow 值，按书写顺序从远到近逐层渲染：第一个最靠后（像环境光），最后一个最靠前（像贴边高光）。
这不是数学叠加，而是 z-order 绘制。所以顺序反了，层次感就塌了。
- 推荐结构：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15)—— 近处细节 + 远处弥散 - 三层以上慎用：渲染开销明显上升，iOS Safari 在低端机上可能掉帧
- 避免滥用不同颜色：彩色阴影（如
5px 5px 0 #ff9ff3）适合装饰，但会干扰可访问性，慎用于按钮/卡片等交互元素
父容器裁剪阴影是最常被忽略的问题
阴影本质画在元素「绘制层之外」，一旦父元素有 overflow: hidden、overflow: clip 或隐式触发新层叠上下文（比如带 transform 的父级），阴影就会被切掉。
临时调试方法：给父元素加 outline: 1px solid red，看阴影是否超出 outline 范围。
- 修复优先级：先关掉所有
overflow再调阴影；再考虑用padding预留空间，或对子元素加margin把它“撑开” - 深色模式下别硬写
rgba(0,0,0,0.2)：背景越深，这个值越显灰甚至发亮；改用与背景色协调的暗灰，比如rgba(0,0,0,0.25)或color-mix(in srgb, #000 25%, var(--bg-color))
真正调得顺的阴影，八成时间花在排查父级裁剪和 spread-radius 微调上，而不是堆参数。
