2.8 CSS3简介
CSS3（Cascading Style Sheets Level 3）是CSS2的升级版本，3是版本号，于1999年开始制定，2001年5月23日完成了工作草案，目前仍然处于开发阶段。
CSS3在CSS2的基础上增加了很多强大的新功能，下面就常用的一些样式属性做简要介绍。
2.8.1 新的边框属性
CSS3带来了三种新的边框属性，分别是圆角边框、边框阴影及图片边框。
1.圆角边框
可通过CSS3的border-radius属性为边框设置圆角样式，其样式声明如下。
显示效果如图2-20所示。
2.边框阴影
可通过CSS3的box-shadow属性为边框设置阴影，其样式声明如下。
box-shadow可选的属性值如表2-7所示。
表2-7 box-shadow属性值说明
显示效果如图2-21所示。
图2-20 为div创建圆角边框
图2-21 为div创建边框阴影
3.图片边框
通过CSS3的border-image属性，可以使用图片来创建边框，样式声明如下。
属性值的含义如表2-8所示。
表2-8 border-image属性值说明
显示效果如图2-22所示。
图2-22 为div创建图片边框
2.8.2 新的背景属性
CSS3带来了多个新的背景属性，支持对背景进行更复杂的设置，具体包括：background-size、background-origin、background-clip以及多重背景图片。
1.background-size
在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。在CSS3中，可以设定背景图片的尺寸，能够以像素或百分比设定尺寸。如果以百分比设定尺寸，那么尺寸是相对于父元素的宽度和高度。
样式声明如下。
上述样式声明，为div指定了一个背景图t.jpg，并设置其宽度为360px，高度为300px。
background-size可选的属性值如表2-9所示。
表2-9 background-size属性值说明
2.background-origin
在CSS3中，可以通过background-origin属性设定背景图片的显示区域，显示区域分为content-box、padding-box及border-box三块，如图2-23所示。
将背景图片的显示区域与元素框相对比可以看出，content-box相当于元素框中元素内容区域，padding-box相当于内容区域加上内边距，border-box相当于元素框中元素显示区域。
下面给出一个综合应用的例子。
【例2-13】 background-origin应用示例。
图2-23 background-origin显示区域
在上述HTML文档中，定义了三个div，每个div都将strawberry.jpg作为背景图像。在第一个div中设置背景图片显示区域为border-box，在第二个div中设置背景图片显示区域为content-box，在第三个div中设置背景图片显示区域为padding-box，实际显示效果如图2-24所示。
3.background-clip
与background-origin一样，可以通过background-clip属性设定背景色的绘制区域为content-box、padding-box或border-box，而在CSS2中，背景色默认绘制在border-box区域。
4.多重背景图片
在CSS3中允许为元素使用多个背景图像，其样式声明如下。
显示效果如图2-25所示。
图2-24 background-origin不同属性的区别
图2-25 多重背景图片
2.8.3 CSS3文本阴影
在CSS3中可为文本添加阴影，方法如下。
显示效果如图2-26所示。
图2-26 文本阴影示例
2.8.4 定义动画
在CSS3出现之前，想要在网页中创建动画，必须依靠gif图片、Flash动画或是JavaScript，借助CSS3的动画属性，可以方便地在网页中创建动画。
1.动画的实质
动画展示了物体运动过程，其实质是连续播放的图片。由于人眼的暂存效应，只需要绘制24幅物体运动中某个瞬间的状态，然后在一秒内连续播放，人就会感觉这个物体是在“动”的。在动画领域，把这些连续播放的图片叫作帧（Frame）。随着计算机在动画制作中的应用，大多数时候不再需要把24帧都一一绘制出来，只需要绘制内容变化较大的帧，计算机就会根据前后帧之间内容变化自动生成中间的帧，这时，需要绘制的那几帧被称为关键帧（Keyframes）。有了帧，就可以定义一个时间轴，确定帧的前后位置，然后再定义播放属性：快播、慢播还是循环播放，这样就完成了一个简单的动画的制作。
CSS3中的动画是描述某一元素从一种样式逐渐变化为另一种样式的过程，在定义时借鉴了传统动画的制作方法，也有“关键帧”“时间轴”“播放属性”的概念。其中“关键帧”“时间轴”通过@keyframes规则体现，“播放属性”通过CSS3动画属性体现。
2.@keyframes规则
@keyframes规则指定“关键帧”及“时间轴”，先看一个例子。
myfirstAnimation是定义的动画名称。
0%至100%是定义的“时间轴”，代表关键帧播放的顺序。
每一个时间点后对应的是“关键帧”，描述的是当前元素的样式。
如果关键帧较少，也可以直接用from和to来表示帧播放的顺序，比如：
3.动画属性
定义好了“关键帧”和“时间轴”，下一步需要做的就是将动画绑定到具体元素上，即让哪一个元素“动”起来，方法是为元素指定一个样式规则，并添加animation-name属性，值为所定义的动画名称。
最后一步是在元素的样式规则中定义动画属性，CSS3中包含的动画属性及其说明如表2-10所示。
表2-10 动画属性说明
下面是一个绘制动画的完整示例。
【例2-14】 CSS绘制动画示例。
代码分析如下。
第一步，定义一个div，动画将绑定在该元素上，展现其位置和颜色的变化过程。
第二步，定义@keyframes规则，设定了5个关键帧，在每一帧，元素div都有不同的背景色和位置。
第三步，绑定元素。
第四步，设定动画属性。
动画运行效果如图2-27至图2-30所示。
图2-27 第1、5帧
图2-28 第2帧
图2-29 第3帧
图2-30 第4帧