CSS Box Shadow Generator

在本篇文章中，我们将学习如何使用我们的 CSS 盒子阴影生成器为网站上的容器或盒子创建阴影。CSS 代码中用于阴影的需要四个值：水平和垂直长度、模糊半径和阴影颜色。

可以使用 box-shadow 属性为网页上的元素添加阴影。它可以指示元素是否可交互，例如按钮、导航项或文本卡。

阴影对我们来说很常见。它们提供了物体尺度和深度的感觉，并且盒子阴影增强了我们在线体验的真实感。如果样式正确，它可以提高网站的吸引力。

CSS 盒子阴影属性

使用 CSS3 的 box-shadow 属性，可以为网页中的几乎任何元素创建阴影效果。它具有这种特性，非常类似于 Photoshop 中的 Drop Shadows（阴影）效果，可以在二维页面上提供深度感。

box-shadow 属性可以为元素添加一个或多个阴影。阴影是元素的一个副本，它在一定距离上移动。border-radius 属性允许阴影跟随带有圆角的块的轮廓，无论是外部还是内部，模糊还是平坦。使用 inset 这个词，会在元素内部产生阴影，使元素呈现出体积感或凹陷感。

语法

该属性具有一个由五个组件组成的复合值：水平偏移、垂直偏移、模糊、扩展和阴影颜色。此外，您可以使用 inset 这个词来定义阴影是内部的还是外部的。

box-shadow CSS 属性与其他属性（如 border，它有子属性（border-width、border-style 等））不同。此外，属性值书写的顺序很重要（inset 关键字除外，它可以放在开头或结尾）。

我们必须为 CSS box-shadow 属性设置各种设置，如下所示。括号表示可选参数。

• Inset（内阴影）：“Inset”是一个类似标志的可选参数，它将阴影从外部移到内部。阴影默认是外部的。因此，我们不需要在 CSS 中添加任何代码来设置它。使用“inset”来修改其默认设置。
• 水平偏移（Horizontal Offset）：水平偏移，也称为 h-offset，是阴影在 x 轴上与中心的距离。它是一个必需的参数。它可以是负数或正数。对于负数，阴影位于盒子的左侧；对于正数值，阴影位于盒子的右侧。
• 垂直偏移（Vertical Offset）：阴影在 y 轴上与中心的距离称为垂直偏移或 v-offset。它是一个必需的参数。它可以是负数或正数。正数值会将阴影放在盒子的下方，而负数值会将其放在盒子的上方。
• 模糊（Blur）：将应用于阴影的模糊程度以模糊度来衡量。它必须是 0 或正数值。模糊度是一个可选参数。如果我们不设置它，结果将为零。
• 扩展（Spread）：将添加到实际阴影或从实际阴影中减去的阴影扩展半径。如果其值为负数，阴影将变小，反之亦然。扩展是一个可选参数。如果不设置它，结果将为零。

如何使用在线 CSS 盒子阴影生成器？

1. 首先，以像素为单位设置模糊、扩展、垂直偏移和水平偏移的大小。
2. 为盒子、阴影和背景选择颜色。背景色和盒子的颜色仅用于预览。生成的 CSS 代码将包含阴影颜色。
3. 如果需要，可以激活复选框以启用内阴影。
4. 有两种预览模式。盒子和标题是两种。我们可以根据您的需求在任一模式下检查创建的盒子阴影。
5. 您可以手动复制 CSS 代码，或使用“复制 CSS”按钮。

在线 CSS 盒子阴影生成器

使用免费的在线工具 CSS 盒子阴影生成器，我们可以创建任何颜色和大小的 CSS 盒子阴影。通过调整设置，我们可以快速构建所需的盒子阴影，将其可视化为盒子、圆形或标题，并获得 CSS 代码。