cssboxshadow

 

CSS box-shadow 属性用于添加一个或多个阴影效果。

 

基本语法：

box-shadow: h-offset v-offset blur spread color inset;

 

box-shadow 属性可以接受多个值，每个值之间使用逗号分隔。

 

h-offset：水平偏移量，可以是正值也可以是负值。正值表示阴影右移，负值表示阴影左移。

 

v-offset：垂直偏移量，可以是正值也可以是负值。正值表示阴影下移，负值表示阴影上移。

 

blur：模糊半径，用于设定阴影的模糊范围。模糊半径越大，阴影越模糊、越扩散。

 

spread：扩张半径，用于设定阴影的尺寸。扩张半径越大，阴影的尺寸越大。正值表示增加阴影尺寸，负值表示减小阴影尺寸。

 

color：阴影的颜色。可以使用具体的颜色值，也可以使用 rgba() 或 hsla() 函数来设定阴影的颜色。

 

inset：可选属性，默认为外阴影（outset），如果设置为 inset，则为内阴影。内阴影会显示在内容和边框之间。

 

接下来，我们来详细讲解每个属性值的用法和效果。

 

1. 单个阴影

如果只需要添加一个阴影效果，可以使用以下语法：

box-shadow: h-offset v-offset blur color;

 

例如：

.box {

box-shadow: 2px 2px 4px #888888;

}

 

这将在 .box 元素上添加一个水平偏移为 2px，垂直偏移为 2px，模糊半径为 4px，颜色为 #888888 的阴影。

 

2. 多个阴影

可以在 box-shadow 属性中使用逗号分隔多个阴影效果，这样可以同时添加多个阴影。

 

例如：

.box {

box-shadow: 2px 2px 4px #888888

-2px -2px 4px #cccccc;

}

 

这将在 .box 元素上添加两个阴影效果：一个右下方的阴影，一个左上方的阴影。两个阴影都具有 2px 的偏移量，4px 的模糊半径，分别为 #888888 和 #cccccc 的颜色。

 

3. 改变阴影的尺寸

通过设置 spread 属性，可以改变阴影的尺寸。

 

例如：

.box {

box-shadow: 2px 2px 4px #888888

-2px -2px 4px #cccccc

0px 0px 10px -5px rgba(0

0

0

0.75);

}

 

这将在 .box 元素上添加三个阴影效果：一个右下方的阴影，一个左上方的阴影，一个中心的阴影。中心的阴影没有偏移量（水平和垂直偏移都为 0），模糊半径为 10px，扩张半径为 -5px（缩小尺寸），颜色为 rgba(0

0

0

0.75)。

 

4. 添加内阴影

通过设置 inset 属性，可以添加内阴影效果。

 

例如：

.box {

box-shadow: inset 2px 2px 4px #888888;

}

 

这将在 .box 元素内部添加一个水平偏移为 2px，垂直偏移为 2px，模糊半径为 4px，颜色为 #888888 的内阴影。

 

总结：

CSS box-shadow 属性可以用于为元素添加阴影效果。通过设置不同的属性值，可以创建出各种形状和风格的阴影效果。掌握 box-shadow 属性的使用方法，可以为网页设计增添更多的视觉效果和细节。