用box-shadow+border-radius可实现纯css立体卡片，但需注意多层阴影须逗号分隔、顺序影响图层、blur与border-radius匹配、避免overflow裁剪、hover需transition限定属性、真机存在低电量降级/极低透明度失效/负扩散裁边等雷区。
直接用 box-shadow + border-radius 就能做出立体卡片，不需要 JS、不需要额外 DOM，但参数配错会发虚、裁边、甚至真机不显示。
box-shadow 多层写法必须单条声明、逗号分隔
浏览器不合并多行 box-shadow 声明，后写的会完全覆盖前写的。比如：
box-shadow: 0 2px 4px rgba(0,0,0,0.1); box-shadow: 0 8px 16px rgba(0,0,0,0.08);
实际只生效第二行。正确写法是：
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.08);
- 顺序决定图层：左边阴影在上（视觉更近），右边在下（更远）
- 最多用 2–3 层，超 3 层真机（尤其 iOS Safari）可能降级或消失
- 避免写
inset和outset混用，除非你明确控制 offset 反向和 blur 比例
border-radius 和 box-shadow 的数值要匹配
圆角太小（如 4px）配大模糊（如 24px），阴影边缘会“漂”在圆角外；圆角太大（如 24px）配小模糊（如 4px），又显得生硬。
- 推荐组合：
border-radius: 12px搭配box-shadow: 0 4px 12px rgba(0,0,0,0.1) - 高分辨率屏可把模糊值 ×1.5，比如
12px → 18px，但别超过24px - 如果父容器设了
overflow: hidden，阴影会被裁掉——要么给父容器加padding，要么改用伪元素包裹
hover 悬停时阴影变化要加 transition 且限定属性
没加过渡的话，:hover 阴影是“啪一下”跳变，毫无立体反馈感。
- 必须写：
transition: box-shadow 0.2s ease-in-out - 别用
transition: all，否则可能意外触发动画重绘（比如字体、背景色） - 悬停加强建议：垂直偏移 +2px、模糊 +4px、透明度 +0.03，例如：
0 6px 16px rgba(0,0,0,0.13) - 移动端注意：老安卓 WebView 对
box-shadow过渡支持弱，可加will-change: box-shadow提示，但别滥用
真机渲染失效的三个隐藏雷区
DevTools 里看着好好的阴影，一上真机就变淡、消失或边缘糊成一片——大概率踩了这些坑：
-
blur > 10px且设备处于低电量模式：iOS Safari 会主动降级渲染 - 用了
rgba(0,0,0,0.05)这类极低透明度：旧 Android WebView 会四舍五入为 0，直接不画 - 多层阴影里混了负扩散值（如
-2px）又没预留空间：容易在小屏上被裁或发虚
上线前务必在 iOS Safari 和主流安卓 Chrome 上实测，别信模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
