前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章，它详细介绍了CSS3的新特性和它的使用方法，它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音，并详细说明了每个新技术目前有哪些浏览器兼容。脚本之家本想将本文翻译成中文版和大家分享，但发现已有国人完成翻译，所以就偷个小懒，转载一下人家的翻译，在此感谢前端观察的博主辛苦翻译本文，为大家贡献了如此珍贵的学习资料。

如果你热爱前端开发，你对CSS感兴趣，那么你肯定不可错过这篇文章。

级联样式表在13年前被引入，而且被广泛使用的CSS 2.1 标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开发有了多少进步——事实上，我们也无法想象。

为什么会这样呢，当提到CSS的时候，过去我们是如此的不情愿和害怕尝试？为什么我们还要使用讨厌的hack和依赖JavaScript的技术来写样式？为什么我们不能利用丰富的CSS3 特性和现代浏览器中可用的工具 并将我们的设计品质带到下一个等级？

是时候在我们的项目中引入CSS3 特性了，不用害怕逐渐在我们的样式表中加入css3特性和选择器会出问题。让我们的客户意识到CSS3的优势 (而且让旧浏览器更快的消失)是我们力所能及的事情——我们应该这样做，特别是在它能够让网站更加灵活并减少开发和维护成本的时候。

在本文中，我们将研究CSS3的优势，并看一下一些网页设计师是如何使用它们的。最后，我们将了解到从CSS3中我们能得到什么以及我们如何在我们的项目中使用它的新特性。

使用浏览器专有属性

为了使用大部分CSS3特性，我们不得不与原来的属性一起使用生产商专有扩展。原因是直到现在，大部分浏览器只支持部分CSS3属性。而且不幸的是，一些属性甚至到最后都可能不被W3C推荐，所以通过指定浏览器专有属性，将他们与标准属性区分开来是很重要的(然后在他们是多余的的时候使用符合标准的样式将之覆盖)。

当然，这种方法的劣势是，将导致一个杂乱的样式表和网站在浏览器之间的表现不一致。毕竟，我们不想在我们的样式表中重拾私有浏览器hack的需求。Internet Explorer的臭名昭著的marquee、blink以及其它标签在大量样式表中被应用，并在20世纪九十年代成为一个传奇；它们依然让现存的很多网站（在其他浏览器中）表现不一致甚至难以阅读。而我们现在也不想将我们自己置于同样的境地，对吧？

然而，网站不需要在所有的浏览器中看起来必须严格的一致。有的时候在某个浏览器中使用私有属性来实现特定的效果是可行的。

最常见的私有属性是用于Webkit核心浏览器的(比如, Safari)， 它们以-webkit-开始，以及Gecko核心的浏览器(比如, Firefox)，以-moz-开始，还有Konqueror (-khtml-)、Opera (-o-) 以及Internet Explorer (-ms-)都有它们自己的属性扩展（目前只有IE8支持-ms-前缀）

作为专业的设计师，我们不得不注意：使用这些私有属性将让我们的样式表不能通过验证。所以目前将他们放到最终版的样式中是少见的。但是在某种情况下，比如试验或学习，我们至少可以考虑将他们和标准的CSS属性一起写到一个样式表中。

扩展阅读

• Vendor-specific extensions and W3C
• Vendor-specific extensions to CSS3
• Vendor-specific properties

1. 选择器

CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的HTML元素而不必使用多余的class、 ID 或JavaScripts。而且它们中的大部分并不是CSS3中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的class和ID的数量并让设计师更方便的维护样式表。

属性选择器

三个新的属性选择器被添加到CSS3：

• [att^="value"]
  匹配包含以特定的值开头的属性的元素
• [att$="value"]
  匹配包含以特定的值结尾的属性的元素
• [att*="value"]
  匹配包含含有特定的值的属性的元素

值的属性的元素

tweetCC 使用一个属性选择器来指定有title属性并以字符“tweetCC”结尾的链接:

浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。

连字符

CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。

比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：

浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的IE6！

伪类

或许在CSS3中增加最多的就是新的伪类了，这里是一些最有趣和最有用的：

• :nth-child(n)
  让你基于元素在父节点的子元素的列表位置来指定元素。你可以是用数字、数字表达式或odd 和even 关键词(对斑马样式的列表很完美)。所以如果你想匹配在第四个元素之后的一个3个元素的分组，你可以简单的这样使用：

   

  :nth-child(3n+4) { background-color: #ccc; }/*匹配第4,7,10,13,16,19...个元素*/

• :nth-last-child(n)
  与上个选择器的思想同样，但是从后面匹配元素（倒序），比如，为了指定一个div里面的最后两个段落，我们可以使用下面的选择器：

   

  div p:nth-last-child(-n+2)

• :last-child
  匹配一个父节点下的最后一个子元素，等同于:nth-last-child(1)
• :checked
  匹配选择的元素，比如复选框
• :empty
  匹配空元素（没有子元素）。
• :not(s)
  匹配所有不符合指定声明(s)的元素。比如，如果你想让所有的没有使用”lead”类的段落的显示为黑色，可以这样写：
  p:not([class*="lead"]) { color: black; }
  .

Andrea Gandino 在他的网站上使用:last-child 为选择器指定每篇日志的最后一个段落，并将其的外间距(margin)设置为0:

浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, :o nly-child, :root, :empty, :target, :checked, :enabled 和:disabled，但是Firefox 3.5 将更加广泛的支持CSS3 选择器。Trident核心浏览器(Internet Explorer)事实上不支持这些伪选择器。

伪元素

在CSS3中唯一引入的伪元素是::selection.它可以让你指定被用户高亮（选中）的元素。

浏览器支持: 目前没有任何一款Internet Explorer 或Firefox 浏览器支持::selection 伪元素。Safari, Opera 和Chrome 均支持。

扩展阅读

• Selectors Level 3: W3C Working Draft
• CSS3: Attribute selectors: CSS3.info
• Compatibility table: CSS3 Selectors
• CSS selectors and pseudo selectors browser compatibility
• CSS3 Attribute Selectors
• ::selection
• General Sibling Selector
• CSS3 Pseudo-classes

2. RGBA和透明度

RGBA 让你可以不仅仅设定色彩，还能设定元素的透明度。一些浏览器尚不支持它，所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

Tim Van Damme在链接的hover效果上使用了RGBA

在这个网站上，Tim Van Damme在鼠标悬停效果上使用了RGBa；例如，在他的首页的network链接上:

当设定一个RGBA 色彩的时候，我们必须依次设定红、蓝、和绿色的值，可以是0-255或百分数。透明值应该在0.0到1.0之间，例如0.5 代表50% 的透明度。

RGBA 和opacity 之间的不同是前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素。

这里有个例子展示我们如何给一个div添加80% 透明: