多重 box-shadow 按书写顺序由近及远渲染；需单声明、三层结构（内/中/外）、固定层数与 inset；仅过渡 blur/offset，用 rgba 控制各层 alpha 渐变，禁用 all 和 hsla，iOS 需硬件加速并真机测试。
box-shadow 多重值的书写顺序决定视觉层次
多重阴影不是简单叠加，而是按从前往后（由近及远）的顺序绘制：第一个 box-shadow 值离元素最近，最后一个最远。过渡时若只对整个 box-shadow 属性做 transition，浏览器会线性插值所有参数——但模糊半径、偏移量、颜色透明度变化速率不一致，容易导致“浮空感断裂”或“阴影突然弹出”。
- 必须把所有阴影写在同一个
box-shadow声明里，不能拆成多个规则（CSS 不支持多值属性的独立过渡） - 推荐用 3 层：内阴影（模拟贴合感）+ 中层主阴影（体现高度）+ 外层弥散阴影（增强空间）
- 避免在悬停时新增或删减阴影层数——浏览器无法插值“有/无”，只会跳变或淡入淡出（取决于是否含
opacity）
transition 要锁定具体可动画参数，别偷懒写 all
transition: all 0.3s 看似省事，实际会让 box-shadow 的每个数值都被强行插值，包括本不该动的阴影颜色（比如你只想改模糊半径和偏移）。更糟的是，某些浏览器对 box-shadow 的插值精度低，尤其在高 DPI 屏幕上易出现色块抖动。
- 只过渡需要变化的维度：
transition: box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 偏移量（
tx/ty）和模糊半径（blur）建议用缓动函数，避免匀速运动带来的机械感 - 如果用了
inset内阴影，确保悬停前后都保留它——否则 inset/outset 切换不可动画
阴影颜色用 rgba 而非 hex，控制透明度渐变
纯黑阴影（#000）在悬停时加模糊，会显得“脏”；直接调 opacity 又会让整层阴影一起变淡，失去层次。正确做法是让每层阴影自带 alpha，靠颜色通道实现自然衰减。
- 基础态：内阴影用
rgba(0, 0, 0, 0.1)，中层用rgba(0, 0, 0, 0.15)，外层用rgba(0, 0, 0, 0.05) - 悬停态：提高中层 alpha 到
0.25，外层提到0.1，内阴影保持不变（维持贴合感） - 别用
hsla或color-mix()——目前主流浏览器对它们在box-shadow中的动画支持不稳定
移动端 Safari 对多层阴影过渡有渲染延迟
iOS 16+ 之前，Safari 渲染多重 box-shadow 过渡时会先画一层、再叠一层，导致过渡中间帧错位。即使加了 will-change: box-shadow，效果也不稳定。
- 折中方案：悬停时只动中层阴影的
blur和ty，内/外层固定不动 - 必要时加
-webkit-transform: translateZ(0)触发硬件加速（仅 iOS） - 真机测试比 DevTools 模拟器更可靠——模拟器常掩盖渲染撕裂问题
细节全在每层阴影的 alpha 值配比和过渡曲线选择上，调错一个 rgba 通道或缓动参数，悬浮感就垮一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
