真实阴影效果需多层box-shadow叠加与方向控制：基础态用双层阴影（0 1px 3px 0和0 1px 2px -1px rgba(0,0,0,0.1)），悬停加深并增大blur/spread；padding管内边距，margin或gap管外间距；border-radius推荐8px，适配响应式；避免inset及滥用border。
box-shadow 怎么配出真实阴影效果
卡片阴影不是加个 box-shadow: 0 2px 4px rgba(0,0,0,0.1) 就完事。关键在「多层叠加」和「方向控制」：上浮感靠 y-offset 正值（向下偏移），悬停变深要同时加大 blur-radius 和 spread-radius，否则边缘发虚。
- 基础态推荐：
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)（双层，更细腻） - 悬停态建议：
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)（突出立体感） - 避免用
inset，它会让卡片像“陷进去”，不符合主流卡片认知
padding 和 margin 的分工必须明确
padding 控制卡片内部留白，决定内容离边框的距离；margin 控制卡片之间/与容器的间距。混用会导致布局错乱，尤其在 flex/grid 容器中。
- 卡片内文距边框：用
padding: 1.5rem（推荐 rem，适配性好） - 卡片间间隙：用父容器的
gap: 1rem（flex/grid），而不是给每个卡片设margin-bottom - 如果父容器是普通块级元素，才用
margin: 0 0 1rem 0控制下间距，但需注意最后一个卡片的多余外边距
border-radius 多大才自然不突兀
圆角不是越大越好。border-radius: 8px 是当前最稳妥的选择：足够柔和，又不会削弱卡片的结构感。超过 12px 在小卡片上容易显得软塌，低于 4px 则接近直角，失去卡片识别度。
- 响应式微调可行：
@media (max-width: 768px) { border-radius: 6px; } - 不要对
img或video子元素单独设border-radius，除非你明确想切掉图片圆角——应统一用卡片自身的border-radius裁剪 - 配合
overflow: hidden使用，否则圆角无效（特别是含绝对定位子元素时）
border 和 box-shadow 能否共存
能，但极少需要。加 border 会破坏阴影的视觉层次，让卡片看起来“贴在页面上”。除非设计规范强制要求描边（如某些金融类产品），否则优先用阴影表达边界。
- 若真要加边框：
border: 1px solid rgba(0,0,0,0.05)（极细、极淡），再叠浅阴影 - 避免
border: 1px solid #e5e7eb这类高对比色，会抢走焦点，也和阴影冲突 - 深色模式下，
border值必须同步调整，而box-shadow的rgba通道天然支持主题切换
.card {
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
overflow: hidden;
}
.card:hover {
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
}
圆角、阴影、内边距三者数值要成比例，比如 border-radius: 8px 搭配 padding: 1.5rem ≈ 24px，视觉节奏才一致。随便凑数的组合一眼就假。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
