在一个元素中显示多个背景图像
在CSS 3中可以在一个元素中显示多个背景图像，还可以将多个背景图像进行重叠显示，从而使得调整背景图像中所用的素材变得更加容易。
在div元素的样式代码中，我们使用到了几个关于背景的属性——background-image属性、background-repeat属性与background-position属性。这些属性都是CSS 1中就有的属性，但是在CSS 3中，通过利用逗号作为分隔符来同时指定多个属性的方法，可以指定多个背景图像，并且实现在一个元素中显示多个背景图像的功能。
注意，在使用background-image属性来指定图像文件的时候，指定的时候是按在浏览器中显示时图像叠放的顺序从上往下指定的，第一个图像文件是放在最上面的，最后指定的文件是放在最下面的。另外，通过多个background-repeat属性与background-position属性的指定，可以单独指定背景图像中某个图像文件的平铺方式与放置位置。
通过指定多个background-image属性、background-repeat属性与background-position属性，我们实现了在一个元素的背景中显示多个图像文件的功能。具体来说，允许被多重指定并配合多个图像文件一起利用的属性如下：
·background-image
·background-repeat
·background-position
·background-clip
·background-origin
·background-size
使用渐变色背景
在CSS 3中，支持对于元素指定渐变色背景。所谓渐变是指从一种颜色慢慢过渡到另外一种颜色。渐变分为线性渐变与放射性渐变。
绘制线性渐变
首先线性渐变的指定方法，最简单的使用代码如下所示：
background：linear-gradient（to bottom，orange，black）；
在上述代码中，我们通过在样式属性值中使用linear-gradient函数实现线性渐变，函数中使用三个参数，其中第一个参数的可指定参数值如下所示。
·to bottom：指定从上往下的渐变，默认渐变起点为元素顶端，渐变终点为元素底端。
·to bottom right：指定从左上往右下的渐变，默认渐变起点为元素左上角，渐变终点为元素右下角。
·to right：指定从左往右的渐变，默认渐变起点为元素左边，渐变终点为元素右边。
·to up right：指定从左下往右上的渐变，默认渐变起点为元素左下角，渐变终点为元素右上角。
·to up：指定从下往上的渐变，默认渐变起点为元素底端，渐变终点为元素顶端。
·to up left：指定从右下往左上的渐变，默认渐变起点为元素右下角，渐变终点为元素左上角。
·to left：指定从右往左的渐变，默认渐变起点为元素右边，渐变终点为元素左边。
·to bottom left：指定从右上往左下的渐变，默认渐变起点为元素右上角，渐变终点为元素左下角。
·可指定一个角度，用于指定渐变线的旋转角度。
绘制放射性渐变
接着介绍放射性渐变的指定方法，最简单的使用代码如下所示：
background-image：radial-gradient（orange，black）；
在上述代码中，我们通过在样式属性值中使用radial-gradient函数实现放射性渐变，函数中使用两个参数，分别为渐变起点色与渐变终点色。
可以通过circle关键字或ellipse关键字指定绘制渐变呈圆形向外扩散方式还是呈椭圆形向外扩散方式。
CSS 3中的变形处理
在CSS 3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4种类型的变形处理。
如何使用transform功能
在CSS 3中，通过transform属性来使用transform功能。到目前为止，Safari 3.1以上、Chrome 8以上、Firefox 4以上以及Opera 10以上版本浏览器都对该属性提供支持。
transform功能的分类
在CSS 3中，可以使用transform功能实现4种文字或图像的变形处理，分别是旋转、缩放、倾斜以及移动。
旋转功能的实现方法前面已经介绍过，使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针旋转。
1.缩放
使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。譬如scale（0.5）表示缩小一半。为使用scale方法实现缩放处理的一个示例。该示例中有一个div元素，使用scale方法使该元素缩小一半。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>scale方法使用示例</title>
</head>
<style type="text/css">
div{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
transform: scale(0.5);
}
</style>
<body>
<div>示例文字</div>
</body>
</html>
另外，可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率。
2.倾斜
使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。例如skew（30deg，30deg）表示水平方向上倾斜30°，垂直方向上倾斜30°。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>skew方法使用示例</title>
</head>
<style>
div{
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
transform: skew(30deg,30deg);
}
</style>
<body>
<div>示例文字</div>
</body>
</html>
另外，skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数——这种情况下视为只在水平方向上进行倾斜，垂直方向上不进行倾斜。
3.移动
使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。例如translate（50px，50px）表示水平方向上移动50px，垂直方向上移动50px。
