box-shadow 生成器

此工具可用于构建 CSS box-shadow 特效,从而为您的 CSS 对象添加盒阴影特效。

Box-shadow 生成器可让您为一个元素添加一个或多个盒阴影。

打开工具后,您会在工具的右上角找到一个矩形。这就是您要应用阴影的元素。当此元素被选中时(首次加载页面时即是如此),您可以对其应用一些基本样式。

  • 使用颜色选择器工具设置元素的 color
  • 使用“border”复选框为元素设置 border
  • 使用滑块设置元素的 topleftwidthheight 属性。

要添加盒阴影,请单击左上角的“+”按钮。这将添加一个阴影,并将其列在左侧的列中。现在您可以设置新阴影的值。

  • 使用颜色选择器工具设置阴影的 color
  • 使用“inset”复选框将阴影设置为内嵌。
  • 使用滑块设置元素的位置、模糊和扩散。

要添加另一个阴影,请再次单击“+”。现在您设置的任何值都将应用于此新阴影。使用左上角的 ↑ 和 ↓ 按钮更改这两个阴影的应用顺序。通过单击左侧列中的第一个阴影再次选中它。要更新元素自身的样式,请通过单击顶部标有“element”的按钮来选中它。

您可以为元素添加 ::before::after 伪元素,并为它们也添加盒阴影。要切换元素及其伪元素,请使用顶部标有“element”、“::before”和“::after”的按钮。

右下角的框包含元素以及任何 ::before::after 伪元素的 CSS。

另见

border-image 生成器

此交互式工具可让您直观地创建边框图像(border-image 属性)。

border-radius 生成器

此交互式工具可让您直观地创建圆角(border-radius 属性)。