箱阴影
随着CSS3可以创建阴影效果！
将鼠标悬停在我！
CSS3阴影效果
随着CSS3您可以添加阴影文字和元素。
在本章中，您将了解以下属性：
-
text-shadow -
box-shadow
浏览器支持
在表中的数字规定，完全支持该属性的第一个浏览器版本。
其次是数字-webkit-或-moz-指定用一个前缀工作的第一个版本。
| 属性 | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.5 |
| box-shadow | 10.0 4.0 -webkit- |
9.0 | 4.0 3.5 -moz- |
5.1 3.1 -webkit- |
10.5 |
CSS3文字阴影
CSS3的text-shadow属性应用于阴影文本。
在最简单的使用，你只指定水平阴影（2像素）和垂直阴影（2像素）：
文字阴影效果！
接着，添加颜色的阴影：
文字阴影效果！
然后，添加一个模糊效果的阴影：
文字阴影效果！
下面的例子显示了一个白色文字与黑色的影子：
文字阴影效果！
下面的示例显示一个红色的霓虹发光的影子：
文字阴影效果！
多重阴影
要添加多个阴影文本，你可以添加一个逗号分隔阴影列表。
下面的例子显示了红色和蓝色的霓虹发光的影子：
文字阴影效果！
下面的例子显示了一个白色的文字加黑，蓝，darkblue阴影：
文字阴影效果！
CSS3 box-shadow属性
在CSS3 box-shadow属性应用于阴影元素。
在最简单的使用，你只指定水平的阴影和垂直阴影：
这是一个黄色<div>采用黑色元素box-shadow
接着，添加颜色的阴影：
这是一个黄色<div>带有灰色元素box-shadow
接下来，添加一个模糊效果的阴影：
这是一个黄色<div>有一个模糊的灰色元素box-shadow
您还可以添加阴影到::前后::伪类后，创建一个有趣的效果：
例
#boxshadow {
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding:
10px;
background: white;
}
#boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind
image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one
half of the remaining 30% */
height: 100px;
bottom: 0;
} 试一试» 牌
使用的例子box-shadow属性创建纸状卡：
1
2016年1月1日
哈当厄尔，挪威
例
div.card
{
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0,
0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align:
center;
}
试试吧（文本卡）» 试用（图像卡）» 自测练习用！
CSS3阴影属性
下表列出了CSS3阴影属性：
| 属性 | 描述 |
|---|---|
| box-shadow | 添加一个或多个阴影元素 |
| text-shadow | 添加一个或多个阴影文本 |