CSS阴影

通过CSS添加阴影可以为网站添加层次感和立体感。CSS提供了多种方式来添加阴影效果，比如：box-shadow、text-shadow、inset、outset等。

box-shadow

box-shadow是CSS中添加阴影效果最常用的属性之一。通过box-shadow可以设置元素的阴影样式，如阴影颜色、大小、模糊度、阴影位置等。

语法：

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

• h-shadow：水平方向的偏移量。可以为负值（阴影在左侧）。
• v-shadow：垂直方向的偏移量。可以为负值（阴影在上方）。
• blur：模糊度，数值越大，阴影越模糊越大。默认为0，表示不模糊。
• spread：阴影的扩展或收缩大小。正值则让阴影扩展，负值则让阴影收缩。默认为0。
• color：阴影的颜色。必须指定颜色值，否则不会显示阴影。
• inset：可选。如果指定该属性，则阴影是内嵌的（元素边框和内部之间的阴影），而不是默认的外部阴影。

示例：

.box {
   box-shadow: 2px 2px 5px #999999;
}

上述代码表示在.box元素的下面和右边均显示一个5像素模糊、颜色为#999999的阴影。如果想要让阴影出现在元素上方和左侧，可以将h-shadow和v-shadow的值改为负值。

text-shadow

text-shadow属性用于为文字添加阴影效果。与box-shadow类似，text-shadow也可以设置阴影的颜色、大小、模糊度等属性。

语法：

text-shadow: h-shadow v-shadow blur color;

• h-shadow：水平方向的偏移量。可以为负值（阴影在左侧）。
• v-shadow：垂直方向的偏移量。可以为负值（阴影在上方）。
• blur：模糊度，数值越大，阴影越模糊越大。默认为0，表示不模糊。
• color：阴影的颜色。必须指定颜色值，否则不会显示阴影。

示例：

h1 {
    text-shadow: 2px 2px 2px #999999;
}

上述代码表示让h1标题下方和右侧均显示一个2像素模糊和颜色为#999999的阴影。

inset和outset

通过inset和outset可以设置元素阴影的位置，使得阴影效果更加逼真。

inset表示将阴影变成内阴影，即元素内部和边界之间的阴影。

outset表示将阴影变成外阴影，即元素外部和边界之间的阴影。

示例：

.box1 {
   box-shadow: 1px 1px 5px #666666 inset;
}

.box2 {
   box-shadow: 1px 1px 5px #666666 outset;
}

上述代码表示.box1元素的阴影为内嵌阴影，而.box2元素的阴影为外部阴影。

结尾

通过CSS添加阴影，能够为网站增加层次感和立体感。可以通过box-shadow和text-shadow属性来设置元素和文字的阴影，还可以通过inset和outset属性来设置阴影的位置。