[译] 盘点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