跳到主要内容
前端术语库

阴影

Box Shadow

样式与 CSS也叫:box-shadow、投影、卡片阴影、Elevation

一句话:在元素下方加一层模糊的暗影,让它看起来浮在页面之上,阴影越大越柔,元素显得越高。

详细解释

box-shadow 的写法是「横向偏移 纵向偏移 模糊半径 颜色」,比如 0 4px 12px rgba(0,0,0,0.1) 表示向下偏移 4px、模糊 12px、10% 不透明度的黑色。好看的阴影通常向下偏移、模糊较大、颜色很淡。

阴影表达的是高度,越往上浮的元素阴影越大。常见分层:卡片用很浅的小阴影,悬停时加深;下拉菜单、气泡卡片用中等阴影;弹窗、抽屉用最大的阴影。Material Design 把这套分层叫 Elevation。

新手常见问题是阴影太黑太硬,比如 0 0 10px black,显得廉价。浅灰背景上也可以用细边框代替阴影。深色模式下阴影几乎看不见,通常改用更亮的背景色区分层次。

示例

灰度线框示意,只表达结构,不代表具体视觉风格。

怎么跟 AI 说

可以直接贴给 Cursor、Claude Code 等工具,把里面的业务内容换成你自己的。

请定义三档阴影并统一使用:卡片用小阴影(向下 1px、模糊 3px、8% 黑色),悬停时换成中阴影;下拉菜单用中阴影(向下 4px、模糊 12px、12% 黑色);弹窗用大阴影(向下 12px、模糊 32px、18% 黑色)。