卡片阴影与圆角需协调以增强真实感，圆角越大应搭配越高模糊值的阴影（如border-radius:12px配box-shadow:0 4px 20px rgba(0,0,0,0.1)），避免阴影“溢出”可采用overflow:hidden或负spread值（如-5px），多层阴影（如0 2px 8px与0 4px 16px组合）模拟光衰减更显立体，浅色背景用低透明黑影，深色模式可选偏灰蓝影并配合描边防止融合，整体遵循物理光照逻辑。
卡片阴影和圆角是CSS中常用的视觉设计技巧，搭配得当能让元素看起来更自然、有层次感。关键在于让阴影的形状与卡片的圆角协调一致，避免出现生硬或不真实的视觉效果。
1. 圆角决定阴影的柔和度
卡片设置了圆角（border-radius）后，如果阴影太硬，会显得突兀。为了让阴影贴合卡片轮廓，应使用模糊值较高的 box-shadow。
建议：- 圆角越大，阴影的模糊值（blur radius）也应适当增加，比如
border-radius: 12px;可搭配box-shadow: 0 4px 20px rgba(0,0,0,0.1); - 避免使用过小的模糊值（如1-2px），否则阴影边缘会显得割裂，与圆角不匹配
2. 避免阴影“穿出”圆角
有时阴影会从圆角外侧“溢出”，看起来像矩形底框。这是因为默认的投影是基于原始矩形生成的。
解决方法：- 使用 overflow: hidden 确保父容器裁剪多余阴影（适用于内嵌阴影或复杂背景）
- 或通过伪元素模拟阴影，完全自定义形状（进阶方案）
- 更简单的方式是调整 spread radius 为负值，轻微收缩阴影，例如：
box-shadow: 0 6px 15px -5px rgba(0,0,0,0.1);
3. 多层阴影增强真实感
真实世界中，阴影不是单一颜色或强度。用多层阴影模拟近远光衰减，能提升立体感。
立即学习“前端免费学习笔记（深入）”；
示例：box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06); border-radius: 16px;
这种组合让阴影由近到远渐变，配合大圆角更显柔和自然。
4. 背景色与阴影透明度协调
浅色背景卡片配低透明度黑色阴影（如 rgba(0,0,0,0.1)）最安全。深色主题下可用偏蓝或偏灰的阴影，避免纯黑太跳。
- 白色卡片 + 白色背景时，可加轻微描边（
border: 1px solid #eee）防止融合消失 - 暗色模式下尝试
box-shadow: 0 4px 12px rgba(0,0,0,0.3)，配合border-radius: 12px
