移动端卡片圆角被截断的根本原因是父容器或自身触发裁剪上下文，需检查并避免 overflow: hidden、transform 等创建新层叠上下文的属性，统一使用负 spread 的 box-shadow 并分层适配响应式单位。
移动端卡片圆角被截断怎么办
最常见的现象是：border-radius设了 12px，阴影也写了，但圆角边缘发虚、被裁掉，甚至整个阴影消失。根本原因不是 CSS 写错了，而是父容器或自身触发了“裁剪上下文”。
- 检查卡片直接父元素是否含
overflow: hidden—— 有就删，或改用overflow: visible - 避免在卡片上加
transform: scale(0.98)或rotate(0.1deg)，这类声明会创建新层叠上下文，导致阴影边界计算异常 - 若必须用
overflow: hidden（比如防图片溢出），请确保它加在卡片自身上，而不是外层包裹容器 - 慎用
clip-path: border-radius(12px)替代border-radius—— 它不触发阴影重绘，圆角处阴影会断裂
box-shadow 在 iOS 和安卓上渲染不一致
iOS Safari 对负 spread 值（如 -1px）更敏感，安卓 Chrome 则对模糊半径容忍度更高。同一段代码，在 iPhone 上阴影边缘锐利，在 Pixel 上却发虚。
- 统一用
box-shadow: 0 1px 4px -1px rgba(0,0,0,0.08)—— 负 spread 收束边缘，rgba(0,0,0,0.08)避免深色背景下发灰 - 禁用
blur-radius > 6px：超过后高 DPI 屏幕易糊，尤其配合scale()动画时 - 深色模式下务必加媒体查询：
@media (prefers-color-scheme: dark) { .card { box-shadow: 0 1px 4px -1px rgba(255,255,255,0.05); } } - 别依赖
filter: drop-shadow()修复兼容问题 —— 它在 iOS 上性能差，且无法控制 x/y 偏移
响应式卡片中圆角和阴影的单位怎么选
用固定 px 值在小屏上显得笨重，用百分比又失去控制力。真正稳妥的做法是分层控制，而非一刀切。
- 基础圆角用
rem：例如border-radius: 0.75rem（对应 12px），随根字体缩放自然适配 - 小屏（
@media (max-width: 480px)）降级为border-radius: 8px+box-shadow: 0 1px 3px -1px rgba(0,0,0,0.06) - 大屏（
@media (min-width: 1024px)）可升至border-radius: 1rem+box-shadow: 0 2px 6px -1px rgba(0,0,0,0.1) - 避免用
em或%控制圆角 —— 字体继承链一乱，圆角就崩
悬停抬升效果在触摸设备上失效
:hover 在 iOS 和 Android 上默认不触发，单纯写 .card:hover { transform: translateY(-2px); } 会导致移动端完全没反馈。
- 用
@media (hover: hover) and (pointer: fine)包裹悬停样式，明确限定仅限鼠标设备 - 触摸设备改用
:active模拟按压反馈：.card:active { transform: translateY(1px); } - 别给
transform加transition后再配will-change: transform—— 移动端 GPU 内存吃紧，容易卡顿 - 如果真要统一交互，优先用 JS 监听
touchstart/touchend切换 class，而非强求 CSS 伪类跨平台一致
transform、overflow、clip-path 等任意一个属性时，阴影就可能悄无声息地消失。最保险的做法，是把卡片当成独立渲染单元来对待：不依赖父容器裁剪，不用非必要 transform，shadow 和 radius 必须同级设置，且始终用 devtools 的 “Rendering” 面板验证实际绘制区域。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
