DevTulz Online

CSS Box Shadow 生成器

背景

什么是 CSS Box Shadow？

CSS box-shadow 属性在元素的边框周围添加阴影效果。阴影可以偏移、模糊、扩散、着色，并设置为 inset（内阴影）。多个以逗号分隔的阴影可以叠加，打造丰富的视觉效果。此生成器可让您直观地构建复杂的多层阴影，并将可直接粘贴的 CSS 复制到剪贴板。

如何使用 Box Shadow 生成器

  1. 调整 Offset X/Y、Blur 和 Spread 滑块以定位和塑造阴影。

  2. 点击颜色色块选择阴影颜色，使用 Opacity 滑块设置透明度。

  3. 开启「内阴影」可创建内发光或凹陷效果。

  4. 点击「+ 添加图层」可叠加多个阴影。

  5. 复制生成的 CSS 并粘贴到您的样式表中。

常见问题

box-shadow 和 drop-shadow 过滤器有什么区别？ box-shadow 在元素的矩形边框周围添加阴影，并支持内部阴影。CSS filter: drop-shadow() 应用于元素的视觉形状（包括透明度），使其能够沿着非矩形轮廓（如具有透明背景的 PNG）进行。

我如何创建 Material Design 卡片提升效果？ 堆叠两个 box-shadow：一个柔和的环境阴影（大模糊、低不透明度、略微扩散）和一个关键阴影（较小模糊、较高不透明度、方向偏移）。例如：0 2px 4px rgba(0,0,0,0.12)、0 4px 16px rgba(0,0,0,0.08)。

box-shadow 会影响页面布局吗？ 不会。box-shadow 不影响元素在文档流中的大小或位置。与 outline 不同，它不占用布局空间，也不会推动其他元素。

我可以为 box-shadow 设置动画吗？ 可以。box-shadow 可以通过 CSS 过渡和动画进行动画处理。为了获得更好的性能，最好仅在必要时过渡 box-shadow — 浏览器无法像 transform 或 opacity 那样有效地用 GPU 加速 box-shadow 的更改。

Keywords: CSS box shadow 生成器, box-shadow CSS, CSS 阴影工具, CSS 投影, 内阴影, 多层阴影, CSS shadow 在线工具