回想起我第一次听说CSS3，还是我最早开始学习HTML+CSS的第一本书，Andy Clarke大师的《超越CSS：Web设计艺术精髓》中介绍的，当时别说HTML5了，连IE8还在天上飞呢，然而CSS3却是确确实实被提上日程的东西。一晃好些年过去了，随着HTML5的热度逐步上升，新型浏览器一个接一个地发布，CSS3也再次引起了人们极高的关注。那么现在，我们究竟可以在这些新型浏览器中获得多少CSS3的新体验呢？

我们现在来试试在Opera 10.51、Firefox 3.62、Chrome Dev 5.0.366.2（在大多数的时候可以折射出Safari的表现，故不再单独测试Safari）、IE 9 Preview中，到底能有怎样的表现，又应该怎样去表现。

1、多重背景图

这个是我最早接触的让我眼前一亮的CSS3属性，尤其是有一阵子我想要同时在页头和页尾应用两套不同的背景图并居中的时候。

多重背景图的用法是这样的：

	#div {
	  background-image:
	    url(image1.jpg),
	    url(image2.jpg),
	    url(image3.jpg),
	    url(image4.jpg);
	  background-repeat:
	    no-repeat,
	    no-repeat,
	    no-repeat,
	    no-repeat;
	  background-position:
	    top left,
	    top right,
	    bottom left,
	    bottom right;
	}
	

目前Opera 10.51、Firefox 3.6.2、Chrome Dev 5.0.366.2都能够很完美地支持多重背景图，然而IE9至今还是无法实现，多少让我有些郁闷……

2、RGBA半透明背景色

这个东西我最早是在Opera 10.00的介绍里面了解到的，在实际应用中非常实用，很多地方都可以用到。而且这个新CSS现在受到了非常广泛的支持，上文中提到的浏览器包括IE9和Safari都可以完美地支持RGBA半透明背景色。

RGBA背景色的用法是rgba(red, green, blue, alpha)，示例如下：

	#div {
	  background-color:rgba(255, 100, 0, 0.5);
	}
	

与RGBA颜色类似的还有可以使用HSL颜色，方法就是把rgba四个字母替换成hsl三个字母而已。

3、奇偶数选择器

表格隔行不同背景色是现在非常常用的一种表格样式，然而要实现起来却相当困难，不得不给每一行添加class，然后再利用后台程序生成。新的选择器解决了这个问题，并且在上述所有浏览器中可用。

奇偶数选择器的使用方法如下：

	#tab_test tr:nth-child(odd) /* 奇数行 */
	{
	  background-color:skyblue;
	}
	#tab_test tr:nth-child(even) /* 偶数行 */
	{
	  color:red;
	}
	

4、:target伪类

另一个非常有意思的小东东，不知道现在的Web设计师是否还记得这么个小东西，写一个超链接，将其href=”#test”，然后在页面中随便某个地方找个元素将其id=”test”，然后当你点击这个超链接，页面将会跳转到这个id=”test”的元素这里。:target伪类就是这个功能的一个延伸，它使得你点击这个超链接时，不只是改变页面位置，那个id=”test”的元素还会被赋予某些样式。

1. 可能因为博客使用了伪静态的关系，这个实例出现了问题，你可以点试试看，不过也许不会出效果……查看示例

它的用法非常简单，在你想被改变样式的目标的选择器后面加上:target就行，比如你想让一个id叫test的元素改变，只要写#test:target就行，当然你也可以用div:target之类更广泛的选择器。这个小东西现在被以上全部浏览器支持。

5、阴影

平面设计时我们最常用的效果就是阴影了……新的CSS让阴影变得容易了，但是IE9还是无法支持到。

阴影的CSS3实现很要命，因为还是实验期的东西，所以Mozilla和Webkit都在CSS属性之前加上了标记以防止误用，而Opera则决定使用原版属性名，所以：

	#box {
	  box-shadow: #333 3px 3px 4px; /* Opera用 */
	  -moz-box-shadow: #333 3px 3px 4px; /* Firefox用 */
	  -webkit-box-shadow: #333 3px 3px 4px; /* Webkit系用 */
	}
	

6、渐变背景色

如果说阴影的写法你已经觉得很要命了，那么我要告诉你，那个毕竟还只是属性名不同……渐变背景色的用法相当混杂，最早响应官方的是Webkit，但是Mozilla也有自己的另一套写法，于是两者的写法不同……另外，IE9继续没支持到。至于Opera，我到现在也没尝试出来它的渐变怎么写，有可能还不支持吧。

	background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
	background: -moz-linear-gradient(top, red, blue);
	

7、被选中文字样式

一个优化细节的好东西，也许日后会被经常用于页面配色的微调吧，目前上述浏览器均已支持，不过Mozilla还是有前缀，Webkit则用了标准名称。

选择这段文字看看效果，对比下选择其他文字时的效果～～

	::selection {
	  background: skyblue;
	  color: pink;
	}
	::-moz-selection {
	  background: skyblue;
	  color: pink;
	}
	

除了上述的个别效果之外，CSS3还有很多更新的功能，包括立体边框、多栏布局、指向变形等等，不过IE6至今仍在警示着我们：革新还有很长的路要走……