用CSS3将你的设计带入下个高度

尽管CSS3的诸多新特性还不被很多浏览器支持，或者说支持的不好。但作为一个前端开发人员，你总不能等到所有浏览器都完美支持它的时候再去学习。
CSS3到底给我们带来了哪些新特性呢？简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。比如圆角，图片边框，文字阴影和盒阴影等。CSS3不仅能简化前端开发工作人员的设计过程，还能加快页面载入速度。
本文里面，就让我们来全面的看一下CSS3的各种新特性。也别忘了检阅我们之前发布的一些CSS教程和技巧文章： 60+CSS技巧教程资源大全 CSS3.0相关资源和参考手册收集整理 使用浏览器专有属性
为了使用大部分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"]
匹配包含含有特定的值的属性的元素
值的属性的元素

a[title$="tweetCC"] {
position: absolute;
top: 0;
right: 0;
display: block;
width: 140px;
height: 140px;
text-indent: -9999px;
}
浏览器支持:只有IE6不支持CSS的属性选择器。IE7和IE8、Opera、Webkit核心和Gecko核心的浏览器都支持。所以在你的样式中使用属性选择器是比较安全的。 连字符
CSS3中唯一新引入的连字符是通用的兄弟选择器（同级）。它针对一个元素的有同一个父级节点的所有兄弟级别元素。
比如，给某个特定的div的同级的图片添加一个灰色的边框(div和图片应该有同一个父级节点)，在样式表中定义下面的样式就足够了：
div~img {
border: 1px solid #ccc;
}
浏览器支持：所有的主要浏览器都支持这个通用的兄弟选择器除了我们最爱的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:

#primary .text p:last-child { margin: 0; }
浏览器支持: Webkit核心和Opera 浏览器支持所有新的CSS3 伪类，Firefox 2 和3 (Gecko核心) 只支持:not(s), :last-child, only-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
#p#副标题#e#
2. RGBA和透明度
RGBA 让你可以不仅仅设定色彩，还能设定元素的透明度。一些浏览器尚不支持它，所以最好在RGBa前面设定其它浏览器支持的没有透明的颜色属性。

Tim Van Damme在链接的hover效果上使用了RGBA
在这个网站上，Tim Van Damme在鼠标悬停效果上使用了RGBa；例如，在他的首页的network链接上:
#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}
当设定一个RGBA 色彩的时候，我们必须依次设定红、蓝、和绿色的值，可以是0-255或百分数。透明值应该在0.0到1.0之间，例如0.5 代表50% 的透明度。
RGBA 和opacity 之间的不同是前者只会应用到指定的元素上，而后者会影响我们指定的元素及其子元素。
这里有个例子展示我们如何给一个div添加80% 透明:
div { opacity: 0.8; }
浏览器支持: RGBA 被Webkit内核浏览器支持。IE所有版本都不支持。Firefox 2也不支持，但是Firefox 3 和Opera 9.5均支持。Opacity 被Opera、Webkit核心 和Gecko核心的浏览器支持。IE所有版本同样不支持。IE只支持自家的该死的滤镜（filter）扩展阅读： CSS Color Module Level 3: W3C Working Draft RGBA colors: CSS3.info RGBA color space Is CSS3 RGBa ready to rock? Super-Awesome Buttons with CSS3 and RGBA
#p#副标题#e#
3. 多栏布局
这是新的CSS3 选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。

tweetCC 在其首页使用了CSS3 多栏选择器
tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div；相反，设计师使用下面的CSS3 多栏布局：
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}
我们可以通过这个选择器定义三件事情：栏数(column-coun)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。 如果column-count未设定，浏览器会在允许的宽度内容纳尽可能多的栏目。
为了在各栏时间添加一个数值的分隔，我们可以使用column-rule 属性，其功能和border 属性类似:
div {
column-rule: 1px solid #00000;
}
上面的这条属性，浏览器中不会看到任何效果，因为它没有分栏，如果配合上面的例子就可以了。
相关属性: column-break-after, column-break-before, column-span, column-fill.
浏览器支持: 多栏布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。扩展阅读： CSS3 module: Multi-column layout: W3C Working Draft Columns CSS3 – Multi-Column Layout Demonstration CSS3 Columns Designing tweetCC Introduction to CSS3 – Part 5: Multiple Columns
#p#副标题#e#
4. 多背景图
CSS3 允许你使用多个属性比如background-image、background-repeat, background-size, background-position, background-originand background-clip等在一个元素上添加多层背景图片.
在一个元素上添加多背景的最简单的方法是使用简写代码，你可以指定上面的所有属性到一条声明中，只是最常用的还是image, position 和repeat:
div {
background: url(example.jpg) top left no-repeat,
url(example2.jpg) bottom left no-repeat,
url(example3.jpg) center center repeat-y;
}
第一个图片将是离用户“最近”的那个。
该属性的一个更复杂的版本可以是这样的：
div {
background: url(example.jpg) top left (100% 2em) no-repeat,
url(example2.jpg) bottom left (100% 2em) no-repeat,
url(example3.jpg) center center (10em 10em) repeat-y;
}
在这里，(100% 2em) 是background-size 的值；第一个背景图片将会出现在左上角并会被拉伸至该div的100%宽度和2em的高度。
因为只有少数的浏览器支持它，又因为在网站上不显示背景有损网站的视觉效果，所以，这并不是一个被广泛应用了的属性。尽管如此，它显然能够大大地提高设计师的工作流并显著减少标签数量——相对于用其它方式实现同样的效果。
浏览器支持: 目前，多背景图片只在Safari/chrome 和Konqueror中有效扩展阅读： Layering multiple background images Multiple backgrounds with CSS3 and CSS3.info Introduction to CSS3, Part 6: Backgrounds
#p#副标题#e#
5. Word Wrap
word-wrap 属性用来防止太长的字符串溢出的。可以用两个属性值normal 和break-word。normal 值(默认的) 只在允许的断点截断文字，如连字符。如果使用了break-word ，文字可以在任何需要的地方截断以匹配分配的空间并防止溢出。

WordPress 后台在数据表中使用了word-wrap.
在WordPress 的控制面板中，word-wrap 属性被用于表格中的元素；比如在日志和页面的列表中：
.widefat * {
word-wrap: break-word;
}
浏览器支持： word-wrap 被Internet Explorer 和Safari/chrome支持。Firefox 将在3.5版本中支持它。 扩展阅读： Force Wrapping: the ‘word-wrap’ property — CSS Text Level 3: W3C Working Draft word-wrap: CSS3.info CSS word-wrap word-wrap: Mozilla Developer Center