box-shadow基本语法为水平偏移、垂直偏移、模糊半径、扩展半径、颜色、可选inset；模糊半径不能为负；多层阴影用逗号分隔，后写在底层；inset使阴影向内投射；drop-shadow()按元素实际形状投影，box-shadow按矩形盒模型计算。
box-shadow 的基本写法和参数顺序
设置阴影最常用的是 box-shadow，它不是“开关式”属性，而是一串按固定顺序排列的值：水平偏移、垂直偏移、模糊半径、扩展半径、颜色，最后可选 inset。漏掉某个值不报错，但含义会变——比如只写两个数值 box-shadow: 2px 2px;，浏览器会把后两项默认为 0，颜色默认为当前文字色（可能看不见）。
常见误操作是把模糊值写成负数，box-shadow: 0 0 -5px #000; 是无效的，模糊半径不能为负；想让阴影更锐利，只能减小该值（如 1px），或配合小扩展值微调。
- 水平偏移为正 → 阴影在元素右侧；为负 → 左侧
- 垂直偏移为正 → 阴影在下方；为负 → 上方
- 模糊半径越大，边缘越柔和；为 0 时是硬边阴影
- 扩展半径为正可放大阴影轮廓，为负可收缩（常用于内凹效果）
用多层 box-shadow 模拟真实立体感
单层阴影只能表现单一方向的光，而真实物体受环境光影响，常需叠加多个 box-shadow 值。CSS 允许用逗号分隔多个阴影，渲染顺序是“从后往前绘制”，即列表里最后一个阴影在最底层，第一个在最上层。
例如按钮按下态的立体反馈：box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05); —— 底层浅灰大范围阴影模拟环境光，上层稍深稍近的阴影强化主光源方向。注意透明度别设太高，否则叠在一起发黑。
立即学习“前端免费学习笔记（深入）”；
- 一般不超过 3 层，再多难以控制且影响渲染性能
- 避免全用相同颜色+透明度，不同层应有明暗/距离差异
- 移动端慎用大模糊值（如 >12px），部分低端 Android 渲染卡顿
inset 阴影做内凹或容器压感效果
inset 关键字让阴影向内投射，适合做卡片内陷、输入框聚焦凹槽、或模拟玻璃按压感。但它不是“反向的 box-shadow”，而是重新定义投影方向：阴影出现在元素内容区内部，不会撑开父容器。
典型用法：box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); 给输入框加顶部内阴影，模拟轻微下压；或者和外阴影组合：box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 -1px 2px rgba(255,255,255,0.8);，后者用高亮内阴影强化顶部高光。
-
inset必须写在所有数值之后，否则整条声明无效 - 内阴影无法通过 z-index 控制层级，它永远在元素背景之上、内容之下
- 不要对
display: inline元素用inset，可能无效果或行为异常
filter: drop-shadow() 和 box-shadow 的关键区别
filter: drop-shadow() 看起来相似，但它是作用于整个元素的“图像滤镜”，会按元素实际形状（包括圆角、透明区域）投射阴影，而 box-shadow 始终按矩形盒模型计算。这意味着：带 border-radius 或 clip-path 的元素，用 drop-shadow() 才能得到贴合边缘的阴影。
但代价明显：filter 是 GPU 加速的，但某些旧版 Safari 对 drop-shadow() 支持不稳定，且无法像 box-shadow 那样叠加多层或使用 inset。另外，它不响应 transform 的缩放变化（阴影大小固定），而 box-shadow 会随缩放重算。
- 图标、头像、SVG 图形优先考虑
filter: drop-shadow() - 按钮、卡片、布局容器仍用
box-shadow更可控 - 不要混用两者做同一元素的阴影，易导致重影或性能下降
