[译] 盘点CSS3中的新特性
这篇文章的目标读者是网页开发人员。本文首先讲诉了CSS3的浏览器前缀，接着将讲述一些基于标准的扩展。在CSS3特性的部分里，将涉及圆角，rgba颜色，阴影，渐变，动画变换，和2D转换等。
前缀
有一些浏览器在CSS3还未标准化之前就已经实现了CSS3的特性。因此，在语法还未被标准规定下来之前，一些CSS3的样式就在那些浏览器中加上了其特定的前缀。例如在Firefox和Safari上，渐变的CSS3语法就不相同。Firefox 使用 -moz-linear-gradient，而 Safari (WebKit) 则使用 -webkitgradient。同理，很多的CSS3语法都被不同的浏览器加上了不同的前缀。
常见的前缀有：
• Chrome: -webkit-
• Safari: -webkit-
• Firefox: -moz-
• IE: -ms-
• Opera: -o-
目前，你应该首先声明带浏览器前缀的样式，然后再声明W3C标准的样式。这是为了保证当未来的浏览器只支持标准化后的CSS3样式时，你的代码仍然能够有效运行。
#prefix-example { -moz-box-shadow: 0 3px 5px #FFF; -webkit-box-shadow: 0 3px 5px #FFF; box-shadow: 0 3px 5px #FFF; }
颜色
CSS3提供了一些新方法来定义颜色，比如增加了alpha透明度的设置。在以前，想实现透明效果通常是平铺一个 1px × 1px 的背景图片，现在你可以抛弃那种做法了。
新增加的 rgb 样式可以允许你用数字来定义RGB的值，而不再需要使用16进制了。 如果你想自己转化两者的对应值，你可以使用Safari自带的 Web Inspector 工具，在 Styles 面板上点击相应的颜色即可。
下面的代码等同于 #FFF， 就是白色：
#rgb-example { // rgb(red, green, blue); color: rgb(255, 255, 255); }
你也可以使用新增的 hsl 样式。HSL分别代表色度、饱和度、亮度。
色度：代表在颜色盘上的度数，0度表示红色，120度表示绿色，240度表示蓝色。在之间的表示相应的中间色。
饱和度：一个百分比值，100% 表示完全显示该颜色。
亮度： 也是一个百分比值，0% 表示暗（黑色），100% 表示亮（白色）。
如果采用rgb或者hsl写法，那么增加alpha透明度非常简单，只需要在后面加上一个 0 到1之间的小数即可。 0表示完全透明，1表示完全不透明。
#alpha-example { background: hsla(324, 100%, 50%, .5); border: 1em solid rgba(0, 0, 0, .3); color: rgba(255, 255, 255, .8); }
浏览器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 完全支持
圆角
过去，在CSS2.1的环境下实现圆角效果简直就是一种打击。因为那通常需要额外的HTML代码段，图片甚至JavaScript代码。
现在，事情变得容易多了，你只需要使用 border-radius 样式。就像 padding 或者 margin的样式定义一样，你可以使用4个radius来定义4个角，或者使用2个radius定义水平的和垂直的角，或者使用1个radius定义所有的角。如果你设置一个足够大的 radius，甚至可以将整个容器组成一个圆形。
#rounded-corner{ border-radius: 20px; // horizonal, vertical border-radius: 20px 20px; // top left, top right, bottom right, bottom left border-radius: 20px 20px 20px 20px; }
浏览器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前缀
• IE: 版本9 以上支持
阴影
在CSS3之前，很多开发人员不会理会阴影效果，因为那是一个大麻烦。现在CSS3提供了 box-shadow 样式，可以让你轻松实现阴影效果。但是注意不要过度使用阴影效果，因为那可能带来浏览器渲染的性能问题。
box-shadow 可以接受若干选项：垂直方向的偏移，水平方向的偏移，模糊的半径，阴影扩展的距离，以及颜色。如果你还给出inset选项，阴影将向容器内扩展，否者默认情况下，阴影是向容器外扩展的。另外，你也可以对一个容器使用若干个阴影，通过使用逗号隔开他们各自的定义，如同下列代码所示：
#drop-shadows{ // horizonal offset, vertical offset, blur radius, color box-shadow: 10px 5px 15px #000; // inset shadows box-shadow: 10px 5px 15px #000 inset; // horizonal offset, vertical offset, blur radius, spread distance, color box-shadow: 10px 5px 15px 15px #000; // multiple shadows box-shadow: 0 1px 1px #FFF inset, 5px 5px 10px #000; }
浏览器支持：
• Firefox: 完全支持
• Chrome: 需要使用 -webkit- 前缀
• Opera: 完全支持
• Safari: 需要使用 -webkit- 前缀
• IE: 版本9 以上支持
文字阴影
在CSS3之前，可能唯一实现文字阴影的方法就是使用加工好的图片代替文字——真是一个淫荡的方法。（没错，原文就是这么写的 ==！）
现在，CSS3允许你通过 text-shadow 样式来增加文字阴影。只需要传入几个参数：垂直偏移、水平偏移、模糊半径(可选参数)、颜色。
#text-shadow{ // horizonal offset, vertical offset, color text-shadow: 1px 1px #FFF; // horizonal offset, vertical offset, blur radius, color text-shadow: 1px 1px .3em rgba(255, 255, 255, .8); }
文字阴影与容器阴影不同点就是：它不支持阴影扩展半径和向内的阴影。
浏览器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 不支持
渐变效果
以前，实现渐变效果通常是靠平铺背景图片。背景图片是固定的宽度或者高度，然后靠图像编辑软件制造渐变效果。
CSS3增加了对线性渐变和径向渐变渐变的支持，也被看作最有用的新特性之一。有若干个种CSS方法可以生成渐变，你只需要声明对应的颜色即可。
对于线性渐变，只需要传入颜色列表即可。
linear-gradient(#CCC, #DDD, white) 从CCC变到DDD，再变到FFF
默认情况下，渐变效果是垂直的。但是你可以通过传入位置值来改变它的方向。
// horizontal gradient
linear-gradient(left, #CCC, #DDD, #FFF);
// or with a specific angle
linear-gradient(-45deg , #CCC , #FFF)
如果你希望更多地控制渐变效果从哪个位置开始，你可以在颜色旁边使用声明一个百分比或者像素值。
linear-gradient(white , #DDD 20% , black) 在容器高度20%的地方已经变成DDD了
你也可以渐变到透明，或者从透明渐变到不透明：
radial-gradient( rgba(255, 255, 255, .8) , transparent )
Safari目前使用的是不同的语法，在不久的将来它将变得兼容标准写法。但是现在，你需要这样使用：
// -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*);
-webkit-gradient(linear, left top, left bottom, from(#FFF), color-stop(10%, #DDD), to(#CCC) );
尽管主流的浏览器都支持渐变，但是几乎都要其浏览器前缀写法：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: alternative implementation
• IE >= 10: with -ms-
• Opera >= 11.1: with -o-
所以，一个支持跨浏览器的渐变效果实现的CSS代码如下：
#gradient-example { /* Fallback */ background: #FFF; /* Chrome < 10, Safari < 5.1 */ background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC)); /* Chrome >= 10, Safari >= 5.1 */ background: -webkit-linear-gradient(#FFF, #CCC); /* Firefox >= 3.6 */ background: -moz-linear-gradient(#FFF, #CCC); /* Opera >= 11.1 */ background: -o-linear-gradient(#FFF, #CCC); /* IE >= 10 */ background: -ms-linear-gradient(#FFF, #CCC); /* The standard */ background: linear-gradient(#FFF, #CCC); }
多重背景
就像你可以在CSS3里设置多重阴影一样（逗号隔开），你也可以设置多重背景。
以前，实现多重背景通常需要创建若干嵌套的DOM元素。现在CSS3让你只需使用"逗号隔开"的写法加上若干个背景样式了。这极大地简化了代码量。
#multiple-backgrounds{ background: url(snowflakes.png) top repeat-x, url(chimney.png) bottom no-repeat, -moz-linear-gradient(white, #CCC), #CCC ; }
浏览器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 版本9 以上支持
选择符
CSS3提供了若干新的选择符：
:first-child
选择Collection中的第一个元素
:last-child
选择Collection中的最后一个元素
:only-child
选择只有一个孩子的元素
:target
选择跟URL的hash值对应的元素
:checked
选择被checked状态的check元素
我想要重点讲述的是下面一些选择符：
第N个孩子
:nth-child 选择符让你改变每N个元素的样式。例如，下面的代码将选择每第3个元素：
#example:nth-child( 3n ) { /* ... */ }
下面的代码将选择奇数号元素或者偶数号元素：
/* Even children */ #example:nth-child( 2n ) { /* ... */ } #example:nth-child( even ) { /* ... */ } /* Odd children */ #example:nth-child( 2n+1 ) { /* ... */ } #example:nth-child( odd ) { /* ... */ }
你也可以使用反向的Nth-child选择符。例如，下面代码将选择最后一个元素：
/* Last child */ #example:nth-last-child( 1 )
实际上，:first-child 选择符等同于 :nth-child(1)，同理， :last-child 等同于 :nth-last-child(1) 。
直接孩子选择符
你可以使用 大于符号> 来限制只选择直接孩子元素
/* Only directly descendant divs */ #example > div { }
否定选择符
你可以使用 :not 来否定一个简单的选择符。不过，目前否定选择符并不支持复杂的选择符，例如你不能这样用 p:not(h1 + p)
/* Only directly descendant children, except ones with the "current" class */ #example > *:not(.current) { display: none }
浏览器支持：
• Firefox: 完全支持
• Chrome: 完全支持
• Opera: 完全支持
• Safari: 完全支持
• IE: 版本9 以上支持
变换效果（Transition）
CSS3增加了对transition的支持，使得你可以借由样式变化创造简单的动画效果。你需要做的是传入以下参数：变换持续时间，属性，变换的方式（可选）。你可以使用秒(s)或微秒(ms)作为持续时间参数。
/* duration, property, animation type (optional) */ transition: 1.5s opacity ease-out /* Multiple transitions */ transition: 2s opacity , .5s height ease-in transition: .5s height , .5s .5s width
有若干种时间点序列（timing sequence）方式可供选择：
• linear
• ease-in
• ease-out
• ease-in-out
或者，你可以自定义一个时间点序列（timing sequence）。时间点序列的目的是控制transition效果在不同时间子段中的速度。
#transition-example { position: absolute; /* cubic-bezier(x1, y1, x2, y2) */ transition: 5s left cubic-bezier(0.0, 0.35, .5, 1.3); }
在Safari和Chrome中，一旦transition完成，一个名叫 WebKitTransitionEvent 的事件将在该元素上触发。 在Firefox中，这个事件叫做 transitionend。不好的地方是，使用CSS3有若干缺点：比如，在变换过程中你不能作过多的控制，以及并不是所有的DOM元素都是可变换的（transitionable）。这就意味着，transition只能被用于简单的动画。另外，一些浏览器（例如 Safari）对transition做了硬件层面上的渲染加速。
#transition-example { width: 50px; height: 50px; background: red; -webkit-transition: 2s background ease-in-out; -moz-transition: 2s background ease-in-out; -o-transition: 2s background ease-in-out; transition: 2s background ease-in-out; } #transition-example:hover { background: blue; }
由于某些原因，如果你想在渐变效果之上做transition，那么必须至少有一个端点具有alpha值。另外，你也不能在某些值之间作transition，比如height:0和 height:auto之间。
浏览器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10.0: with -ms-
• Opera: with -o-
边框图像
使用 border-image 样式，你可以设置一张图片作为DOM元素的边框。第一个参数指出图片的URL，接着一个参数指出需要的图片是怎样从原图片上切割的，最后一个参数指出图片的伸展方式。可选的伸展方式有round（平铺），repeat（重复），和stretch（缩放）。
border-image: url(border.png) 14 14 14 14 round round;
border-image: url(border.png) 14 14 14 14 stretch stretch;
浏览器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE: 不支持
• Opera: with -o-
Box Sizing（盒模型的大小调整？）
你是否曾经有过这样的想法，使一个元素的宽度为100%，但是它仍然具有padding和margin值？ 对于传统的盒模型来说，CSS对于百分比宽度的计算时参考的是父容器的宽度，然后再加上margin和padding。因此，如果一个元素有100%的宽度，再加上padding和margin或者border，它一定会溢出的（overflow）。
现在，通过设置 box-sizing属性的值为 border-box （它的默认值是contetbox），你可以改变盒模型大小计算的方式，让它一并考虑borders、margins、padding,和content。
.border-box { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
该特性目前已被各浏览器广泛支持了，而且它是安全稳定的除非你考虑在IE8之前的版本中使用。
形状变换（Transformations）
拜CSS3所赐，我们可以实现简单的2D形状变换。比如，可以让元素旋转，缩放，倾斜。下面的代码是把一个元素逆时针旋转30度。
transform: rotate( -30deg );
下面的代码是把一个元素沿着X方向和Y方向各自倾斜一定的角度。
transform: skew( 30deg , -10deg );
下面的代码是使用scale表达式把一个元素的大小增加或减少一定的比例。默认情况下，一个元素的scale应该是1.0。
transform: scale(1.2);
注意，你可以通过并排这些transformation函数，从而达到实现多种变换的效果。
transform: rotate(30deg) skewX(30deg);
浏览器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 9: with -ms-
• Opera: with -o-
活动盒模型（Flexible Box Model）
CSS3引进了活动盒模型的概念。这个概念在其他GUI框架上已经存在很久了，比如在Adobe Flex上。活动盒模型有什么用呢？比如，在以前，如果你想让list元素按照水平方向排列，你需要使用元素浮动。现在活动盒模型让你可以完成这个效果。请参照以下的代码。
.hbox { display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-align: stretch; -webkit-box-pack: left; display: -moz-box; -moz-box-orient: horizontal; -moz-box-align: stretch; -moz-box-pack: left; } .vbox { display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; display: -moz-box; -moz-box-orient: vertical; -moz-box-align: stretch; }
首先，我们设置该元素的display属性值为 -webkit-box 或者 -moz-box。然后，设置direction的值，告诉该元素的子元素将如何排列它们的盒子。默认情况下，所有的子元素会相同地扩展以适应父元素的大小，但是，你可以设置 box-flex 改变这种行为。
通过设置 box-flex 为0，就使得子元素不会扩展。如果设置 box-flex 为1甚至更高的值，那么子元素将扩展以占领其他的空白的空间。例如，可以设置边栏（sidebar）的 flex值为0，设置主栏的 flex值为1，这样边栏不会扩展，主栏将扩展到占满剩余的空间。
#sidebar { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; width: 200px; } #content { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
浏览器支持：
• Firefox: with -moz-
• Chrome: with -webkit-
• Safari: with -webkit-
• IE >= 10: with -ms-
• Opera: 不支持
自定义字体
@font-face 样式可以让你在网页中使用自定义字体。这样，该网页的显示就可以不再依赖于用户电脑中已安装的字体了。目前支持字体类型为 TrueType 或者 OpenType 的字体。字体文件必须放在跟该网页相同的域名上。
使用 @font-face 时首先要给出该字体的font-family，然后给出指向字体文件的地址。
@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("/fonts/VeraSeBd.ttf"); }
接着在网页中的任何地方使用该字体了。font-family的值跟上面的font-family值对应。
#font-example { font-family: "Bitstream Vera Serif Bold"; }
字体将以异步下载的方式下载到用户浏览器中，并且在下载完成后作用与网页上。在下载还未完成的时间里，那些字体会暂时以浏览器默认字体显示。因此，如果考虑用户体验，可以先指定一个其他已安装的可选字体来替换浏览器的默认字体。
浏览器支持：
• Firefox: full support
• Chrome: full support
• Safari: full support
• IE >= 9: full support
• Opera: full support
