卡片阴影“假”主因是参数比例失衡：y-offset过小、blur-radius过大、spread-radius未调或滥用万能值；真实立体感靠y-offset与blur-radius协同，非堆叠层数。
卡片阴影看起来“假”，八成不是没加 box-shadow，而是参数比例失衡——y-offset 太小、blur-radius 太大、spread-radius 没调，或者直接套用了生成器给的万能值。
box-shadow 参数怎么配才不飘不贴地
真实立体感靠的是 y-offset（垂直偏移）和 blur-radius（模糊半径）的协同，不是堆层数。常见错误是 box-shadow: 0 2px 20px rgba(0,0,0,0.15)：2px 偏移太短，20px 模糊又太散，结果阴影像蒙了一层灰，既看不出高度，也失去方向感。
- 微浮起（2–4px 高度）→
box-shadow: 0 2px 6px -2px rgba(0,0,0,0.1)：负spread-radius收紧阴影边缘，让它紧贴卡片底边 - 中等悬浮（6–8px）→
box-shadow: 0 4px 12px -1px rgba(0,0,0,0.12)：blur ≈ 3×y-offset，视觉上自然有距离感 - 明显抬升（12px+）→ 必须双层：
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.1), 0 12px 24px -4px rgba(0,0,0,0.08)：第一层模拟接触投影，第二层模拟环境光扩散
为什么加了 border-radius 阴影还“溢出”或发虚
box-shadow 默认按元素原始矩形区域绘制，不受 border-radius 裁剪——这不是 bug，是规范行为。所以圆角卡片加阴影后，四个角容易出现生硬的“阴影尾巴”或边缘虚化不一致。
- 别用
overflow: hidden粗暴裁剪，它可能意外切掉绝对定位子元素（比如角标.badge） - 更稳妥的做法是用
clip-path: border-box（现代浏览器支持良好），或退而求其次用clip-path: inset(0) - 如果卡片本身有
border，建议去掉；若必须保留，border宽度要 ≤1px，颜色用rgba(0,0,0,0.05)，否则会和阴影混成一块
内外阴影怎么叠加才不发灰
单写一层外阴影太单薄，全靠多层叠加又容易叠重变灰。关键在两层阴影的透明度错开、功能分工明确：
- 外阴影负责“抬升感”：
0 4px 12px -2px rgba(0,0,0,0.1)（负 spread 收边） - 内阴影负责“压亮边”：
inset 0 1px 2px rgba(0,0,0,0.05)（极小偏移+弱模糊，只压顶部边缘） - 两个 alpha 值不能相同，0.1 和 0.05 是安全差值；若都写成 0.1，叠加后局部透明度会接近 0.19，视觉上发闷
hover 动效里最容易翻车的三件事
悬停加深阴影本该增强交互反馈，但很多人一动就卡顿、跳变或闪烁，问题往往不在阴影本身，而在过渡方式。
- 别写
transition: all 0.2s ease——它会强行触发所有属性重绘，包括 layout-sensitive 的box-shadow，低端安卓机上尤其明显 - 明确只过渡阴影：
transition: box-shadow 0.2s ease - 避免在
:hover中突变blur-radius（比如从 4px 直跳到 24px），改用transform: translateY(-2px)配合小幅阴影变化，更流畅且可硬件加速 - iOS Safari 对 >30px 的
blur-radius会触发全图高斯模糊，滚动卡顿。移动端建议用媒体查询降级：@media (max-width: 768px) { .card { box-shadow: 0 2px 8px -1px rgba(0,0,0,0.08); } }
最常被忽略的是深色模式适配——rgba(0,0,0,0.1) 在黑背景上几乎不可见，得用 prefers-color-scheme 分离明暗色值，而不是指望自动反转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
