通过box-shadow和border-radius配合可实现卡片式布局，需先设border-radius（如12px）再加box-shadow（如0 4px 12px rgba(0,0,0,0.1)），确保阴影随圆角自然过渡且不被父容器overflow:hidden裁剪。
box-shadow 和 border-radius 怎么配合用
阴影和圆角必须同时设置才叫“卡片式”，只加 border-radius 会切掉阴影边缘，只加 box-shadow 又没圆润感。关键在于：先设圆角，再加阴影，且阴影不能被父容器裁剪。
常见错误是给卡片加了 border-radius，但外层容器（比如 <div>）没设 <code>overflow: hidden 或用了 transform，导致阴影被截断；或者阴影的 spread radius 设成负值，反而让阴影缩进去了。
-
border-radius: 12px是安全起点，移动端建议不小于 8px，桌面端可到 16px -
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)是较通用的组合：水平偏移 0、垂直偏移 4px（避免浮空感）、模糊半径 12px、透明黑 - 如果卡片有内边距（
padding），阴影默认从 border 边缘出发，所以无需额外调整box-shadow的 spread 值
为什么卡片内容溢出时阴影消失
这是最常被忽略的渲染细节：当卡片内部元素（比如图片、绝对定位子元素）超出卡片边界，而卡片本身没设 overflow: hidden，浏览器仍会绘制完整阴影，但若父容器有 overflow: hidden 或启用了硬件加速（如含 transform: translateZ(0)），就可能裁剪掉阴影区域。
- 检查卡片直接父容器是否带
overflow: hidden或clip-path - 避免在卡片上滥用
transform（尤其是scale或rotate），它会创建新的层叠上下文并影响阴影渲染边界 - 真要处理溢出内容，优先用
overflow: hidden配合border-radius，而不是靠clip-path模拟圆角——后者不触发阴影重绘
响应式卡片中阴影和圆角怎么适配不同屏幕
固定像素值（如 12px）在小屏上会显得过厚，大屏上又不够稳重。更稳妥的做法是用相对单位或媒体查询分级控制。
- 用
rem替代px：例如border-radius: 0.75rem（对应 12px 基准），随根字体缩放自然变化 - 小屏（
max-width: 480px）可降级为border-radius: 8px+box-shadow: 0 2px 6px rgba(0,0,0,0.08) - 深色模式下别忘了用
@media (prefers-color-scheme: dark)调整阴影颜色，比如改用rgba(255, 255, 255, 0.05)
要不要用 filter: drop-shadow() 替代 box-shadow
filter: drop-shadow() 确实能绕过某些溢出裁剪问题，因为它作用于整个元素的 Alpha 通道，但代价明显：它不区分 border 和 content，所有透明区域都会投影，而且无法单独控制 x/y 偏移，性能也略差（尤其动画中）。
- 仅当卡片含不规则透明 PNG 或需要“贴图式”投影时才考虑
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1)) - 日常卡片布局坚决用
box-shadow，它可控、可优化、兼容性好（IE10+） - 注意：
filter会强制创建新层叠上下文，可能意外改变 z-index 行为
真正难的不是写对那两行 CSS，而是排查哪一层容器悄悄截掉了阴影，或者哪个 transform 让圆角边缘发虚。动手前先打开浏览器的“层叠加面板”（Chrome DevTools → Rendering → Paint flashing），看阴影是否被正确绘制出来。
