CSS box-shadow 属性：为元素添加阴影效果 (cssbox-shadow)

文章编号：1936 / 更新时间：2024-12-30 19:02:12 / 浏览：次

CSS box-shadow 属性用于在元素周围添加阴影效果。它允许您控制阴影的偏移量、模糊半径、扩展量和颜色。

语法

box-shadow: h-shadow v-shadow blur-radius spread-radius color;

其中：h-shadow：阴影在水平方向上的偏移量。v-shadow：阴影在垂直方向上的偏移量。blur-radius：阴影的模糊半径。spread-radius：阴影的扩展半径。color：阴影的颜色。

示例

添加原始阴影以下示例在元素周围添加一个原始阴影： ```添加内阴影以下示例在元素内侧添加一个阴影： ```添加多个阴影以下示例在元素周围添加多个阴影： ```调整阴影模糊半径以下示例增加阴影的模糊半径，使其更加柔和： ```调整阴影扩展量以下示例增加阴影的扩展量，使其更加明显： ```调整阴影颜色以下示例使用透明度为 50% 的黑色阴影： ```

属性值

h-shadow 和 v-shadowh-shadow 和 v-shadow 属性的值可以是以下值：像素值：指定阴影的偏移量。例如，"5px"。百分比值：指定阴影相对于元素宽度的偏移量。例如，"50%"。关键字：inset：创建内阴影。initial：设置阴影为初始值。inherit：从父元素继承阴影。blur-radiusblur-radius 属性的值可以是以下值：像素值：指定阴影的模糊半径。例如，"5px"。关键字：initial：设置阴影模糊半径为初始值。inherit：从父元素继承阴影模糊半径。spread-radiusspread-radius 属性的值可以是以下值：像素值：指定阴影的扩展量。例如，"5px"。关键字：initial：设置阴影扩展量为初始值。inherit：从父元素继承阴影扩展量。colorcolor 属性的值可以是以下值：颜色值：指定阴影的颜色。例如，"000000"。关键字：transparent：创建透明阴影。initial：设置阴影颜色为初始值。inherit：从父元素继承阴影颜色。