本文中，我们将详细介绍这些 CSS3 新特性在不同浏览器中的实现支持情况，并结合实例讲解如何利用这些特性进行开发一些绚丽的应用。

CSS3 新特性在浏览器中的不同实现

RBGA 颜色

RGBA 颜色是你可以使用 RGB 来控制兑现过的颜色并且可以调整对象的透明度，无论是文本、背景还是边框均可使用该属性。该属的性语法在其支持的浏览器中相同，如下：

清单 1. RBGA 颜色代码示例

				 
 background:rgba(254, 255, 200, 0.75); 

例如上面代码所示，前三个参数分别是分别是 R、G、B 三原色，范围是 0-255。第四个参数是背景透明度，范围是 0-1，如 0.5 代表透明度 50%。这个属性使我们在浏览器中也可以做到像 Win7 一样的半透明玻璃效果。

图 1.RGBA 颜色效果

另外 RGBA 和 Opacity 之间的不同点是前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素。目前支持 RBGA 颜色的浏览器有：Safari 4+、Chrome 1+、Firefox 3.0.5+、和 Opera 9.5+，IE 全系列浏览器都不支持该属性。

圆角

CSS3 新特性中除了 RGBA 颜色，最常用的一项就是圆角效果。圆角属性无需使用背景图片就能给任意 HTML 元素添加圆角。使用 CSS3 圆角属性将大大减少你制作图片或者调试 JavaScript 的时间，并且浏览器原生态的支持运行更快、更稳定、显示也更清晰。其在主要浏览器中的语法如下：

清单 2.CSS3 圆角代码示例

				 
 /*FireFox 语法 */ 
 -moz-border-radius: 6px
				 6px
				 6px
				 6px; 
 -moz-border-radius-topright: 6px; 
 -moz-border-radius-topleft: 6px; 
 -moz-border-radius-bottomright: 6px; 
 -moz-border-radius-bottomleft: 6px; 

 /*WebKit 核心浏览器语法 */ 
 -webkit-border-radius: 6px
				 6px
				 6px
				 6px; 
 -webkit-border-top-right-radius: 6px; 
 -webkit-border-top-left-radius: 6px; 
 -webkit-border-bottom-right-radius: 6px; 
 -webkit-border-bottom-left-radius: 6px; 

 /*CSS 标准语法 */ 
 border-radius: 6px
				 6px
				 6px
				 6px; 
 border-top-right-radius: 6px; 
 border-top-left-radius: 6px; 
 border-bottom-right-radius: 6px; 
 border-bottom-left-radius: 6px; 

如上面代码所示，四个角的效果可以通过一行代码 border-radius: 6px 6px 6px 6px来指定，其中四个参数从左到右分别代表：左上角、右上角、右下角、左下角。也可以类似 border-top-right-radius: 6px;这样分别指定每一个角的效果。

图 2. 圆角效果

可以看出 Firefox 和 Webkit 核心的浏览器和 CSS 标准用法大同小于，只是属性前缀有些差别。目前支持圆角属性的浏览器有：Safari 3+、Chrome 1+、Firefox 1+，IE 全系列浏览器和 Opear 不支持该属性。

块阴影与文字阴影

块阴影和文字阴影是你可以不适用图片就能对 HTML 元素添加阴影，增加显示的立体感增强设计的细节。快阴影使用 box-shadow 属性，文字属性使用 text-shadow 属性，其语法如下：

清单 3. 块阴影和文字阴影代码示例

				 
 /*FireFox 语法 */ 
 -moz-box-shadow: 10px
				 10px
				 25px
				 #CCC; 
 -moz-text-shadow: 10px
				 10px
				 25px
				 #CCC; 
 /*WebKit 核心浏览器语法 */ 
 -webkit-box-shadow: 10px
				 10px
				 25px
				 #CCC; 
 -webkit-text-shadow: 10px
				 10px
				 25px
				 #CCC; 
 /*CSS 标准语法 */ 
 box-shadow: 10px
				 10px
				 25px
				 #CCC; 
 text-shadow: 10px
				 10px
				 25px
				 #CCC; 

如上面代码所示，第一个参数表示阴影水平偏移量，第二个表示阴影垂直偏移量，第三个参数表示阴影扩散的半径，第四个参数定义阴影的颜色。

图 3. 块阴影和文字阴影示例

另外我们还可以定义多个阴影中间用逗号隔开，阴影的颜色可以使用 RGBA 透明色定义，例如

清单 4. 多阴影代码示例

				 
text-shadow: 0 010px rgba(0,255,0,0.5), -10px5px4px
    rgba(0,0,255,0.4),15px-4px3pxrgba(255,0,0,0.7); 

目前支持块阴影和文字阴影的属性有：Safari 3+、Chrome 1+、Firefox 3.0.5+，IE 全系列浏览器和 Opear 不支持该属性。

渐变色

渐变色是 Web 设计中很常用的一项元素，它可以增强 Web 元素的立体感同时使单一颜色的页面看起来不是那么突兀。过去为了实现渐变色我们通常需要先制作一个渐变的图片，将它切割成很细的一小片，然后使用背景重复使整个 HTML 元素拥有渐变的背景色。这样做有两个弊端：为了使用图片背景很多时候使得本身简单的 HTML 结构变得复杂；另外受制于背景图片的长度或宽度，HTML 元素不能灵活的动态调整大小。CSS3 中 Webkit 和 Mozilla 对渐变都有强大的支持，但是不同之前的一些属性，这次两个厂商没有能采用一致的语法。

清单 5.Mozilla 渐变色语法

				 
 background: -moz-linear-gradient(
center top,/* 渐变开始的坐标 */
rgba(254, 216, 80, 0.75),/* 渐变开始颜色 */
rgba(230, 125, 30, 0.75) 50%,/* 中间渐变颜色 */
rgba(254, 235, 121, 0.75)/* 渐变结束颜色 */
 ) 
 repeat scroll 0
				 0 transparent; 

如上面代码所示，Mozilla 采用 -moz-linear-gradient标签表示线性渐变。第一个参数表示渐变开始的坐标，可以是坐标值，也可以是 top、bottom、left、right、center 等值。后面参数是渐变的颜色值，个数不限，之间用逗号隔开。每个颜色值可以是普通的十六进制颜色也可以是 RGBA 颜色值。每个颜色后面还可以跟一个百分比或者 0-1 之间的小数，表示该颜色在整个渐变色中的比例。

清单 6.Webkit 渐变色语法

				 
 background:-webkit-gradient(
linear,/* 渐变类型线性 */
left top,/* 渐变开始的坐标 */
left bottom,/* 渐变结束的坐标 */
from(rgba(254, 216, 80, 0.75)),/* 渐变开始颜色 */
to(rgba(254, 235, 121, 0.75)),/* 渐变结束颜色 */
color-stop(0.5,rgba(230, 125, 30, 0.75))/* 渐变的中间颜色 */
 ) 
 repeat scroll 0 0 transparent; 

Webkit 浏览器使用 -webkit-gradient属性表示渐变。第一个参数是渐变类型，通常是 linear线性渐变。第二个参数是渐变开始的坐标，和 Mozilla 的第一个参数相同。第三个参数是渐变结束的坐标。第四个和第五个分别是渐变开始和结束的颜色，可以是十六进制颜色值，也可以是 RGBA 颜色值。最后的 color-stop属性可以有无数个，在前五个参数的后面以逗号隔开，表示家变中间的渐变颜色。在 color-stop属性中，第一个参数是该渐变色占得比例，可以是 0-1 的一个小数或者是一个百分数；第二个参数是渐变的颜色值同样可以是十六进制的颜色值或者 RGBA 的颜色值。

图 4. 渐变色示例

从上面的效果图可以看出，线性渐变是一个很强大的功能。使我们使用很少的 CSS 代码就能做出以前需要使用很多图片才能完成的效果，同时该功能是浏览器原生态支持的，渲染更快效果更好。很可惜的是目前支持该属性的浏览器只有最新版的 Safari、Chrome、Firefox 浏览器支持，且语法差异较大。

形变

形变 Transform 是 CSS 继线性颜色渐变之后的又一枚重磅炸弹，通常使用 CSS 和 HTML 我们是不可能使 HTML 元素旋转或者倾斜一定角度的。为了使元素看起来更具有立体敢，我们不得不把这种效果做成一个图片，这样就限制了很多动态的使用应用场景。Transform 属性的引入使我们以前通常要借助 SVG 等矢量绘图手段才能实现的功能，只需要一个简单的 CSS 属性就能实现。在 CSS3 中 Transform 属性主要包括 rotate 旋转、scale 缩放、translate 坐标平移、skew 坐标倾斜、matrix 矩阵变换。下面我们就来看看每个属性是如何使用的。

清单 7. 旋转代码示例

				 
 /*Webkit 核心浏览器 */ 
 -webkit-transform: rotate(-90deg); 
	
 -webkit-transform: scale(2); 
 -webkit-transform: scale(2, 1); 
	
 -webkit-transform: translate(10px, 20px); 
	
 -webkit-transform: skew(30deg, -10deg); 
	
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); 
	
 /*Firefox 浏览器 */ 
 -moz-transform: rotate(-90deg); 
	
 -moz-transform: scale(2); 
 -moz-transform: scale(2, 1); 
	
 -moz-transform: translate(10px, 20px); 
	
 -moz-transform: skew(30deg, -10deg); 
	
 -moz-transform: matrix(1, -0.2, 0, 1, 0, 0); 
	
 /*Opera 浏览器 */ 
 -o-transform: rotate(-90deg); 
	
 -o-transform: scale(2); 
 -o-transform: scale(2, 1); 
	
 -o-transform: translate(10px, 20px); 
	
 -o-transform: skew(30deg, -10deg); 

 -o-transform: matrix(1, -0.2, 0, 1, 0, 0); 

旋转属性代码非常简单，rotate 属性加上旋转角度参数，45deg 代表顺时针方向旋转 45 度。如果是逆时针旋转 45 度则是 -45deg。

类似于旋转，缩放属性是由 scale 关键字加上缩放参数实现的。当只有一个参数 2 时表示该 HTML 元素的 X 轴、Y 轴方向同时被放大 2 被，0.5 表示同时缩小一半。如果同时有 2 和 3 两个参数时，表示该 HTML 元素的 X 轴被放大 2 被 Y 轴方向被放大 3 被。

坐标平移属性顾名思义，就是将该 HTML 元素向 X、Y 轴方向平移若干像素，由 translate 属性实现。后面两个参数分别表示向 X 轴、Y 轴平移的量。

skew 属性也是一个很有用的 transform 功能，它可以将一个对象围绕着 X 和 Y 轴按照一定的角度倾斜。这和 rotate 的旋转不一样，rotate 只是旋转而不会让 HTML 元素的形状改变，而 skew 会让这个 HTML 元素的形状改变。skew 有两个参数，分别代表该 HTML 元素沿 X 和 Y 轴的倾斜度数。

Matrix，你没有看错，就是我们通常的矩阵变换。这个变换就是我们在解析几何中学到的坐标系变换。他有六个参数 (a, b, c, d, e, f)，是一个 3 × 3 的矩阵，代表坐标变换的变换矩阵。使用它我们就可以很灵活的完成任意的坐标系变换。有兴趣的朋友话可以查看大学解析几何的课本，或者 W3c 在 SVG 中关于 Matrix 变化的定义和描述。

目前支持这 5 中变换转属性的浏览器有 Safari 4+、Chrome 5+、Firefox 3.5+、Opera10.5+，IE 全系列浏览器不支持该属性。 (责任编辑：admin)