上一章CSS3高级教程请查看：css3文本溢出
使用CSS3，您可以对元素应用阴影。
使用CSS3阴影CSS3可以让你在不使用任何图像的情况下为元素添加阴影效果，就像你在Photoshop中所做的那样。在CSS3之前，切片图像用于在元素周围创建阴影，这是非常烦人的。
【css3阴影shadow –
CSS3高级教程】下面的部分将描述如何将阴影应用到文本和元素上。
CSS3 box-shadow属性box-shadow属性可用于向元素的框中添加阴影，您甚至可以使用逗号分隔的阴影列表应用多个阴影效果，创建方框阴影的基本语法如下：
box-shadow: offset-x offset-y blur-radius color;
box-shadow属性的组件有以下含义：
- offset-x – 设置阴影的水平偏移量。
- offset-y – 设置阴影的垂直偏移量。
- blur-radius – 设置模糊半径。值越大，模糊就越大，阴影的边缘就越模糊。不允许有负值。
- color – 设置阴影的颜色。如果颜色值被省略或未指定，它将获取color属性的值。
.box{
width: 200px;
height: 150px;
background: #ccc;
box-shadow: 5px 5px 10px #999;
}
注意: 添加box-shadow时，如果没有指定模糊半径组件的值，或者设置为0(0)，阴影的边缘将是锐的。
类似地，你可以使用逗号分隔的列表添加多个框阴影：
.box{
width: 200px;
height: 150px;
background: #000;
box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
CSS3文本阴影text-shadow属性可以使用text-shadow属性对文本应用阴影效果，您还可以使用与box-shadow相同的表示法将多个阴影应用于文本。
h1 {
text-shadow: 5px 5px 10px #666;
}
h2 {
text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
推荐阅读
- css3 2D变换 – CSS3高级教程
- css3文本溢出 – CSS3高级教程
- css3渐变gradient – CSS3高级教程
- css3背景background – CSS3高级教程
- css3颜色color – CSS3高级教程
- css3边界border – CSS3高级教程
- 验证css代码 – CSS高级教程
- css属性选择器 – CSS高级教程
- css透明度opacity – CSS高级教程