本文目录
什么是 CSS box-shadow？
CSS 的 box-shadow 属性会在元素边框周围添加阴影效果。它是网页设计中用于营造层次感和视觉层级最常用的 CSS 属性之一。单条 box-shadow 声明可以包含水平和垂直偏移、模糊半径、扩展半径以及颜色。
阴影可以叠加 —— 你可以用逗号分隔，将多重阴影应用到同一个元素上。这一技巧能实现逼真的立体感、发光边框和新拟物化设计等精致效果。inset 关键字会将阴影翻转到元素内部，用于表现按下或凹陷的效果。
我们的生成器如何工作
CheckTown 的 Box Shadow 生成器提供了一个可视化界面来打造 CSS 阴影。拖动滑块、实时查看效果，当你对结果满意时即可复制 CSS。
- 通过直观的滑块调整 X 偏移、Y 偏移、模糊半径和扩展半径
- 选择带透明度控制的阴影颜色，切换 inset 模式，并叠加多重阴影
- 从 Subtle、Medium、Large 或 Glow 等预设开始 —— 然后自定义以契合你的设计
免费试用 —— 无需注册
打造一个阴影 →何时使用阴影
阴影对于在现代网页界面中营造层次感和视觉层级至关重要。它们引导用户的视线，并传达可交互性。
- 卡片和面板的抬升 —— 微妙的阴影将卡片从背景中托起，营造出分层的界面
- 按钮状态 —— 在悬停时添加或加深阴影，以表示可交互性并提供触感反馈
- 模态框和下拉浮层 —— 醒目的阴影将悬浮元素与其下方的页面区分开来
常见问题
box-shadow 会影响布局或性能吗？
阴影不会影响布局 —— 它们纯粹是视觉效果，不会改变元素在文档流中的尺寸或位置。在现代浏览器中性能通常非常出色，但在频繁重绘的元素上使用极大的模糊半径或大量叠加的阴影，可能会影响渲染速度。
我可以为 box-shadow 添加动画吗？
可以，box-shadow 能通过 CSS 过渡和关键帧添加动画。不过，为 box-shadow 添加动画会触发重绘，代价可能较高。为获得更流畅的性能，可考虑改为对一个带固定阴影的伪元素做透明度动画，而不是直接过渡阴影值本身。
box-shadow 和 drop-shadow 有什么区别？
box-shadow 会为元素的盒子（包括其 border-radius）应用一个矩形阴影。filter: drop-shadow() 应用的阴影则会贴合元素的实际形状，包括图片中的透明区域。UI 元素使用 box-shadow，带透明度的图片使用 drop-shadow。