反清复明，誓杀吴三桂！（这就是一个文字阴影的案例）

CSS Shadow 阴影

在CSS中可以给元素加阴影，本文将介绍相关的两种CSS属性：

• text-shadow
• box-shadow

CSS Text Shadow 文字阴影

在CSS中text-shadow属性可用来定义文字的阴影。

案例1：水平方向2px偏移且垂直方向2px偏移的文字阴影

反清复明

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

运行一下

案例2：在案例1的基础上，设置阴影的颜色为西红柿色（颜色名为Tomato）。

反清复明

h1 {
    text-shadow: 2px 2px Tomato;
}

运行一下

案例3：在案例2的基础上，设置阴影的羽化，即把阴影搞模糊点。

反清复明

h1 {
    text-shadow: 2px 2px 5px Tomato;
}

运行一下

案例4：将文字用白色、阴影用黑色

反清复明

h1 {
    color: White;
    text-shadow: 2px 2px 5px Black;
}

运行一下

案例5：将阴影的偏移量都设置成零

反清复明

h1 {
    text-shadow: 0px 0px 5px Tomato;
}

运行一下

阴影混合

text-shadow可以取值多种阴影设置，如此即可将多种阴影叠加显示。

案例1

反清复明

h1 {
    text-shadow: 0 0 3px Tomato, 0 0 5px #46acb6;
}

运行一下

案例2

反清复明

h1 {
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

运行一下

案例3

反清复明

h1 {
    color: yellow;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

运行一下

CSS box-shadow 属性

使用box-shadow属性可以给元素添加阴影。

案例1：水平方向10px偏移且垂直方向10px偏移的box阴影
默认情况下，如果不设置阴影，box-shadow的颜色则会与元素的文本颜色保持一致，即等价于元素的color属性的取值。

div {
    box-shadow: 10px 10px;
}

运行一下

案例2：在案例1的基础上，设置阴影的颜色

div {
    box-shadow: 10px 10px Gray;
}

运行一下

案例3：在案例2的基础上，将阴影模糊化

div {
    box-shadow: 10px 10px 5px Gray;
}

运行一下

兼容性问题

整体来说，box-shadow属性的兼容性很高，但是为了追求更高的兼容性，一般会在设置box-shadow属性的同时，对-moz-box-shadow和-webkit-box-shadow设置同样的属性值。

示例代码

div {
    -webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); 
}