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