要加阴影，但必须克制；真正的扁平化用极简box-shadow模拟微弱光源，避免渐变、浮雕或厚重内阴影，基础态控制在0 1px 3px rgba(0,0,0,0.08)以内，悬停态不超过0 2px 6px rgba(0,0,0,0.12)，spread-radius通常为0，靠blur-radius（3–6px）与透明度组合构建层次。
扁平化设计里要不要加阴影？
要，但必须克制。真正的扁平化不是“零阴影”，而是用极简的 box-shadow 模拟微弱光源，避免渐变、浮雕或厚重内阴影。很多项目一上来就套 0 4px 12px rgba(0,0,0,0.15)，结果卡片像贴了层灰膜——这不是扁平，是脏平。
transition 应该只作用于 box-shadow
写 transition: all 0.3s 是常见错误。它会让 background-color、border 甚至 font-size 都参与过渡，造成意外抖动或卡顿。扁平化交互讲究“精准反馈”，所以：
- 明确限定过渡属性：
transition: box-shadow 0.25s ease-out - 悬停时只改
box-shadow，不改transform（抬升会破坏扁平感） - 基础态阴影控制在
0 1px 3px rgba(0,0,0,0.08)以内 - 悬停态最多放大到
0 2px 6px rgba(0,0,0,0.12)
为什么 spread-radius 通常设为 0？
扁平化阴影强调“贴近表面”的光感，spread-radius 会让阴影向外均匀膨胀，产生塑料感或按钮感。除非你刻意做轻量悬浮（比如带圆角的卡片），否则保持 spread-radius 为 0 更安全。真正影响层次的是 blur-radius 和透明度组合：
-
blur-radius超过8px容易发虚，建议3px–6px -
rgba(0,0,0,0.08)到rgba(0,0,0,0.12)是安全透明度区间 - 避免用纯黑
#000，它在浅色背景上会“吃掉”边缘细节
伪类状态不止 hover
扁平化交互不止靠悬停。真实场景中，:focus（键盘聚焦）、:active（点击瞬间）、甚至 :has(:focus-within)（子元素获焦）都该有对应阴影变化。比如表单输入框：
- 默认：
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05) -
:focus：box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 2px rgba(0,123,255,0.2) -
:active：box-shadow: inset 0 2px 4px rgba(0,0,0,0.1)
这些细微差别才是扁平化设计里最易被忽略的质感分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
