box-shadow参数顺序为水平偏移、垂直偏移、模糊半径、扩展半径、颜色、可选inset；多层投影逗号分隔，前层在下后层在上；filter:drop-shadow按Alpha通道投影，支持圆角边缘，但不支持inset。
box-shadow 的基本写法和参数顺序
直接写 box-shadow 时，参数顺序错一个，投影就完全不出现或位置反常。它固定是：水平偏移、垂直偏移、模糊半径、扩展半径、颜色，最后可选 inset。
常见错误是把模糊值写成负数（无效），或漏掉前两个必填偏移量（浏览器会直接忽略整条声明）。
-
box-shadow: 2px 2px 4px rgba(0,0,0,0.2)—— 最常用组合：轻微右下偏移 + 轻微模糊 -
box-shadow: 0 0 0 2px #007bff—— 无偏移无模糊，只加 2px 实边框效果（比border更灵活） -
box-shadow: inset 0 0 8px rgba(0,0,0,0.1)—— 内阴影，常用于表单输入框凹陷感
多层投影怎么写才不覆盖、不冲突
用逗号分隔多个投影时，顺序决定图层叠放：越靠前的越“底下”，越靠后的越“上面”。这点和 z-index 直觉相反，容易误判层次。
典型场景是既要外轮廓光晕，又要底部深色阴影模拟抬升感——得把浅色扩散影放前面，深色方向影放后面。
-
box-shadow: 0 0 12px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.15)—— 先一层薄雾，再一层明确下压影 - 别写成
box-shadow: 0 4px 16px rgba(0,0,0,0.15), 0 0 12px rgba(0,0,0,0.05)，后者会被前者视觉盖住 - 超过 3 层投影在低端设备上可能触发渲染降级，尤其配合
transform动画时
box-shadow 和 filter: drop-shadow 的关键区别
box-shadow 按元素盒模型（border-box）投，矩形；filter: drop-shadow() 按元素实际 Alpha 通道投，能跟随圆角、裁剪甚至 SVG 路径边缘。
比如一个带 border-radius: 50% 的头像，用 box-shadow 会投出方形虚影，而 drop-shadow 才是真正圆形。
- 圆角图片/卡片：优先用
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) - 需要内阴影（
inset）：只能用box-shadow，filter不支持 -
drop-shadow在部分旧版 Safari（≤13.1）中对 transform 元素失效，box-shadow更稳
性能隐患：什么情况下 box-shadow 会卡顿
模糊半径（第三个参数）越大，重绘成本越高，尤其在滚动区域里给频繁重排的元素加高斯模糊投影，很容易掉帧。
不是所有“看起来模糊”的场景都必须调大 blur-radius，有时用多层低模糊叠加更高效。
- 避免在
:hover中突然从0 0 0 #000切到0 4px 24px #000—— 模糊半径跳变触发全量重绘 - 动画投影时，只动前两个偏移量（
translate级别），保持模糊/颜色不变，GPU 可加速 - 真要动态控制模糊，改用
filter: blur()+opacity组合，比改box-shadow的第三参数更轻量
模糊值和层级顺序是实际中最常翻车的两个点，改完记得在真机上滑一滑看是否掉帧，别只盯着 DevTools 里“看起来正常”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
