移动端卡片阴影“糊”或“浮”根本原因是参数未适配高DPI与小视口：需用整数单位、浅灰低透明色（如rgba(0,0,0,0.08)）、blur≈3×v-offset、禁用>2px spread，深色模式换白底色，圆角用clip-path替代overflow:hidden，过渡仅限box-shadow和transform。
移动端卡片阴影为什么总显得“糊”或“浮在天上”
根本原因是参数没按设备特性调：桌面端常用的 0 4px 12px rgba(0,0,0,0.1) 在手机上会因像素密度高而模糊失真，或因视口窄、内容小，让偏移量显得过大。真实移动端阴影要更轻、更收、更克制——不是缩小数值，而是重配比例。
box-shadow 参数怎么配才通透不发灰
通透感来自三件事：颜色用浅灰+低 alpha、blur 和 v-offset 协同、spread 基本不用。别套桌面值，改用这些：
-
0 2px 6px -2px rgba(0,0,0,0.08)：微浮起，负 spread 收边，避免阴影“毛边” -
0 4px 12px -1px rgba(0,0,0,0.06)：中等悬浮，blur ≈ 3×v-offset，视觉距离自然 - 深色模式下必须换色：
rgba(255,255,255,0.08)或用color-mix(in srgb, white 8%, transparent) - 绝对别写
spread-radius> 2px，超过就硬、就假，尤其在 iOS Safari 上
圆角卡片阴影边缘发虚或被裁？别用 overflow: hidden
移动端圆角卡片加 border-radius 后阴影溢出，本质是 box-shadow 按原始矩形绘制，不是 bug。但用 overflow: hidden 会切掉 badge、icon 等绝对定位子元素。
- 推荐方案：
clip-path: border-box（Chrome 111+/Safari 16.4+ 支持良好） - 兼容 fallback：
clip-path: inset(0)，比 overflow 更安全 - 如果卡片必须带 border，宽度 ≤1px，颜色用
rgba(0,0,0,0.03)，否则和阴影混成一块
hover 或 active 态动效卡顿？问题不在阴影本身
移动端点击反馈靠 :active，但很多人一加 transition: all 就掉帧——它触发 layout 重排，尤其在低端安卓机上。
- 只过渡关键属性：
transition: box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) -
:active时建议用transform: translateY(1px)+box-shadow: 0 1px 4px -1px rgba(0,0,0,0.1)，模拟轻微按压 - 禁用
filter: drop-shadow()做过渡——它不支持硬件加速，iOS 上易掉帧 - 加
will-change: transform, box-shadow提示浏览器提前优化
最常被忽略的是深色模式适配和亚像素 spread：前者导致阴影消失，后者在 Safari 上渲染异常。参数不是越精细越好，整数 + 明确职责（近投/远弥分层）才是移动端立体感的底层逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
