用 box-shadow 配合 rgba() 做多层阴影 + 渐变透明度，比单层 opacity 更可控、更真实；因为 opacity 会降低整个元素及子内容的透明度，无法实现阴影由近及远的自然衰减，而多层 box-shadow 可通过不同 blur、spread 和 rgba() alpha 值精准模拟物理投影纵深感。
直接说结论：用 box-shadow 配合 rgba() 做多层阴影 + 渐变透明度，比单层 opacity 更可控、更真实。
为什么不能只用 opacity 控制投影透明度
很多人一上来就给元素加 opacity: 0.7，结果发现整个盒子连带文字、边框、子内容全变淡了——这不是“投影透明”，是“整块糊掉”。opacity 是作用于整个渲染树的，它不区分投影和内容，也无法让阴影由近及远自然衰减。
-
opacity会穿透到所有后代元素，无法单独控制阴影部分 - 投影本应有空间纵深感（比如靠近元素边缘更实、远离处更虚更淡），
opacity给不出这种梯度 - 当元素本身需要高对比度文字时，
opacity会让文字可读性下降
用 rgba() 写多层 box-shadow 模拟深度梯度
真正能模拟物理投影衰减的是叠加多个 box-shadow，每层用不同 blur、spread 和 rgba() 的 alpha 值。越靠外的阴影越虚、越淡，越靠内的越实、稍重。
- 第一层（近）：
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3)—— 贴边、小模糊、中等透明度 - 第二层（中）：
box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.2)—— 稍远、更大模糊、更低透明度 - 第三层（远）：
box-shadow: 0 12px 24px 6px rgba(0, 0, 0, 0.1)—— 最远、最虚、最淡
三者用英文逗号拼接，写在同一个 box-shadow 声明里即可生效。注意：顺序很重要，前面的阴影会盖在后面之上，所以要把“近”的放最前。
box-shadow 中 spread 和 blur 的实际影响差异
初学者常混淆 blur 和 spread。它们对透明梯度的贡献完全不同：
-
blur控制阴影边缘的“发散软硬程度”：值越大，阴影越弥散、越不可见，但不会改变阴影面积大小 -
spread控制阴影“整体缩放”：正值扩大阴影轮廓（适合模拟投影被地面拉长），负值收缩（可用于内阴影或压暗边缘） - 要做自然投影，通常
spread用小正值（如1px～4px），而把主要衰减交给blur+rgba()的 alpha 递减
容易忽略的兼容性与性能细节
多层 box-shadow 在现代浏览器毫无压力，但有两个隐性坑：
- IE 11 及更早版本不支持多层
box-shadow（只认第一个），如果必须兼容，得降级为单层 +filter: drop-shadow()，但后者不支持spread - 移动端低端设备上，超过 4 层阴影可能触发重绘开销上升，尤其配合
transform动画时；建议最多 3 层，且避免在滚动区域高频元素上滥用 -
box-shadow不会触发硬件加速，但若同时加了will-change: transform或transform: translateZ(0)，反而可能因强制图层提升而改善性能
真正难调的不是语法，而是 alpha 值之间的比例关系——0.3 → 0.2 → 0.1 看似线性，但在视觉上可能断层；实际推荐用 0.25 → 0.12 → 0.06 这类近似指数衰减，更接近真实光散射规律。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
