box-shadow四个参数顺序不能乱，因标准写法为h-offset、v-offset、blur-radius、spread-radius，前两者决定方向距离，blur控制边缘虚化，spread调节阴影整体大小；顺序错则解析失效。
直接用 box-shadow 就能做出有层次感的卡片，但阴影“假”或“糊”多半是因为参数没调对，不是代码写错了。
为什么 box-shadow 的四个数值顺序不能乱？
标准写法是 box-shadow: h-offset v-offset blur-radius spread-radius color;。新手常把 blur-radius（模糊半径）和 spread-radius（扩张半径）搞混——前者控制边缘虚化程度，后者决定阴影整体大小。比如 box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15); 中，12px 是模糊值，0 表示阴影不额外放大；若改成 2px，阴影会更“紧贴”卡片边缘，质感更扎实。
-
v-offset建议用正值（如4px），模拟自然光从上往下照的效果 - 避免设过大的
blur-radius（比如 >30px），否则阴影发散、失去立体锚点 - 多层阴影可用逗号分隔，例如加一层浅色内阴影增强厚度：
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.15), inset 0 1px 2px rgba(255,255,255,0.8);
卡片背景色和阴影颜色不搭，看起来像贴纸怎么办？
阴影不是独立存在，它得“属于”卡片。如果卡片是浅灰背景（如 #f8f9fa），阴影用纯黑 rgba(0,0,0,0.2) 就会突兀。更自然的做法是让阴影带一点环境色倾向：
- 浅色卡片配偏灰黑阴影：
rgba(0,0,0,0.08)或rgba(33,37,41,0.06) - 深色卡片（如
#2d3748）则用偏蓝灰阴影：rgba(0,0,0,0.3)或rgba(26,32,44,0.4) - 别用
hsl()或hex直接写阴影色，必须用rgba()控制透明度，否则无法叠加出柔和过渡
响应式下阴影突然变重或消失？检查这些地方
移动端缩放或小屏渲染时，box-shadow 容易因像素比（dpr）或浏览器优化被裁切或模糊加剧。常见诱因：
- CSS 中写了
transform: scale(0.98)类似操作，会放大阴影渲染区域，导致边缘锯齿 —— 改用width/height调整尺寸更稳妥 - 父容器设置了
overflow: hidden，而阴影超出卡片边界（尤其用了正spread-radius），直接被剪掉 —— 加padding或改用负margin预留空间 - 部分安卓 WebView 对多层
box-shadow渲染异常，建议在移动断点中降级为单层：@media (max-width: 480px) { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
真正难的不是写出来，而是让阴影在不同背景、不同设备、不同缩放比例下都“稳得住”——参数微调 1px、透明度浮动 0.02，都可能影响真实感。动手时先固定卡片尺寸和背景，再一点点动 blur-radius 和 rgba 的 alpha 值，比套模板管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
