box-shadow 工作 - CSS

box-shadow 是 CSS 中用于设置阴影效果的属性。它可以为元素创建有深度感的 3D 效果，也可以用于创建轮廓等效果。

语法

box-shadow 属性的语法如下：

box-shadow: [h-shadow] [v-shadow] [blur] [spread] [color] [inset];

其中：

• h-shadow：必需。表示阴影水平偏移量，可以为负值。
• v-shadow：必需。表示阴影垂直偏移量，可以为负值。
• blur：可选。表示阴影的模糊半径，可以为 0，值越大模糊程度越高。
• spread：可选。表示阴影的扩散半径，可以为 0，值越大阴影面积越大。
• color：可选。表示阴影颜色，可以使用具体的颜色值或关键字。
• inset：可选。表示是否将阴影设置为内阴影，可以为 inset。如果省略该值，则默认设置为外阴影。

示例

以下是一些使用 box-shadow 属性的示例：

/* 简单的黑色阴影 */
box-shadow: 2px 2px 4px black;

/* 多个阴影，以逗号分隔 */
box-shadow: 2px 2px 4px black, -2px -2px 4px gray;

/* 内阴影 */
box-shadow: inset 2px 2px 4px black;

/* 多个内阴影 */
box-shadow: inset 2px 2px 4px black, inset -2px -2px 4px gray;

以上示例中，第一个示例创建了一个简单的黑色阴影，其水平偏移量为 2px，垂直偏移量为 2px，模糊半径为 4px。第二个示例在第一个示例的基础上增加了一个灰色的阴影，以逗号分隔多个阴影。第三个示例创建了一个内阴影，用于模拟元素凹陷的效果。第四个示例在第三个示例的基础上增加了一个灰色的内阴影。

总结

box-shadow 可以用于创建漂亮的阴影效果和轮廓效果，并为元素增加深度感。如果你想让你的网站看起来更加美观和专业，不妨尝试使用 box-shadow 属性。