box-shadow比border更可靠，因其提供独立视觉浮层且不占布局空间；需配合border-radius使用，响应式中应降级参数强度，并控制rgba透明度在0.03–0.12间。
模块边界模糊时，box-shadow 比 border 更可靠
纯色边框在浅灰背景上容易“消失”，尤其当相邻模块用相近颜色时。box-shadow 能提供独立于背景的视觉浮层，且不侵占布局空间。优先用 box-shadow: 0 2px 6px rgba(0,0,0,0.08) 替代 border: 1px solid #e0e0e0 —— 阴影自带轻微景深感，人眼更容易识别“这是两个分离的块”。
避免 z-index 乱序导致阴影被遮盖
初级项目常因随意设 z-index 让模块层叠错乱，结果是上层模块的阴影被下层内容吃掉。解决方式很简单：
- 所有模块默认不设
z-index（即自然文档流） - 只在需要“弹出”行为的模块（如模态框、下拉菜单）设
z-index: 1000级别值 - 若必须分层，统一用
z-index: 1（卡片）、z-index: 2（悬浮按钮）、z-index: 3（提示条）这种小整数阶梯，别用999、9999
border-radius 和 box-shadow 必须配套使用
圆角模块如果只加 border-radius 不加阴影，边缘会显得“贴在页面上”，缺乏独立性。真实效果取决于两者的协同：
-
border-radius: 8px配box-shadow: 0 2px 12px rgba(0,0,0,0.06)—— 适合内容卡片 -
border-radius: 4px配box-shadow: 0 1px 4px rgba(0,0,0,0.04)—— 适合表单区域或工具栏 - 禁用
border-radius: 0+box-shadow组合：直角阴影看起来像 bug，不是设计
响应式中阴影需降级，别让手机端卡顿
低端安卓机渲染多层 box-shadow 会明显掉帧。在 @media (max-width: 768px) 中应主动简化：
立即学习“前端免费学习笔记（深入）”；
/* 移动端降级方案 */
@media (max-width: 768px) {
.card {
box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 模糊半径从 12px → 3px */
/* 不要删 shadow，只减参数强度 */
}
}真正容易被忽略的是：阴影的 rgba() 透明度别低于 0.03，否则在 OLED 屏幕上会发虚；也别高于 0.12，否则像蒙了层灰。中间值 0.06 是多数项目的安全起点。
