必须同时设置border-radius和box-shadow于同一元素，否则圆角不带动画、阴影不贴合轮廓；仅设圆角则无立体感，仅设阴影则边缘生硬，两者缺一不可。
border-radius 和 box-shadow 必须同时设置、且作用于同一元素，否则圆角不带动画过渡、阴影不贴合轮廓——这是绝大多数“看起来像卡片但总觉得假”的根本原因。
为什么只加 border-radius 没阴影，或只加 box-shadow 不圆润
浏览器渲染时，box-shadow 默认围绕元素的矩形边界框（bounding box）生成，和 border-radius 是否存在无关。如果只设圆角没加阴影，视觉上只是切角；如果只加阴影没设圆角，阴影仍是直角矩形，边缘生硬。
- 必须把两者写在同一个 CSS 规则里，例如：
border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); - 不能只给父容器设
border-radius，而把box-shadow加在子元素上——阴影形状仍按子元素原始矩形算 -
border-radius值建议用固定像素（如8px、12px）或rem，避免用百分比（除非明确要正圆）
border-radius: 50% 没变圆？检查图片宽高是否相等
对 border-radius: 50% 却得到椭圆，不是 bug，是 CSS 正常行为：水平方向取宽度一半，垂直方向取高度一半。长图+50% = 椭圆。
- 强制正方形：显式设
width: 160px; height: 160px; - 现代写法更灵活：
aspect-ratio: 1 / 1; object-fit: cover;，不拉伸内容，适配响应式 - 别只写
width: 100%却不设height或aspect-ratio，此时50%实际无效
box-shadow 被截断或不显示？先查父容器和渲染上下文
阴影“消失”最常见的原因是被裁剪，而非样式写错。它依附于元素边界，但受父级约束。
- 检查直接父容器是否含
overflow: hidden或clip-path—— 这会直接砍掉阴影区域 - 避免在卡片上用
transform: scale()或rotate()，它们创建新层叠上下文，导致阴影渲染边界收缩 -
shadowColor未设置是隐形杀手：即使shadowOffsetX、shadowBlur都写了，shadowColor: ""（空字符串）也会让阴影完全不可见 - 若必须用
transform，可改用filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1))绕过裁剪，但它不支持多层、无法控制扩展半径，且 Safari 旧版有偏移
深色模式、响应式、hover 动效中容易忽略的协同点
真正难的不是写出第一版效果，而是让圆角和阴影在不同条件下保持一致感——这些细节不报错，但一上线就“差点意思”。
- 深色模式下，
rgba(0,0,0,0.1)的阴影在黑底上几乎不可见，需配合@media (prefers-color-scheme: dark)改为rgba(255,255,255,0.05) - 移动端小屏用
border-radius: 8px+box-shadow: 0 2px 6px rgba(0,0,0,0.08)更协调，大屏可升到16px+0 6px 16px - 加
transition: box-shadow 0.2s ease时，务必同时过渡border-radius（哪怕值不变），否则 hover 中圆角突变会破坏视觉连贯性
圆角与阴影的协同不是一次写完就结束的事——它们会随着父容器、嵌套层级、颜色方案、设备尺寸甚至动画状态持续变化。最稳的做法，是把 border-radius 和 box-shadow 当作一个不可拆分的视觉单元来维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
