CSS3作为网页设计的新标准，为开发者带来了许多令人兴奋的新特性。本文将介绍一些最有趣且流行的CSS3特性。
如果对CSS还不太熟悉，可以从Nongjian Zhou的文章《CSS入门》开始学习。这篇文章提供了CSS语法、常用选择器以及如何将CSS添加到HTML文件中的实用指南。
值得注意的是，CSS3目前仍处于工作草案状态，尚未成为最终且稳定的W3C推荐标准。CSS3的一个新特点是，提议的新特性被拆分为超过40个模块。一些模块非常实验性，而另一些已经相当稳定，并正在新的浏览器版本中得到实现。
CSS3颜色模块已经成为实际的W3C推荐标准。新的CSS3颜色特性包括HSL颜色规范，以及直接指定透明度和alpha通道的能力。
传统上，有多种方式在HTML标记和CSS中指定颜色。这些包括颜色关键字、十六进制值和RGB值。
CSS3增加了通过色调、饱和度和亮度（HSL）值指定颜色的能力。
.example {
color: hsl([色调], [饱和度], [亮度]);
}
.implemented {
color: hsl(240, 50%, 80%);
}
色调表示颜色在色轮上的度数。W3C文档提供了一些有用的色调和饱和度值的表格供参考，并且有许多在线工具可以生成色调值。
饱和度表示颜色的百分比，其中0%是完全去饱和（灰度），100%是完全饱和（所选颜色的所有鲜艳）。亮度表示颜色的亮度百分比，其中0%是没有亮度（黑色），100%是全部亮度（白色）。
一个用于实验HSL颜色的好工具是HSL颜色选择器，它允许选择一个颜色，然后复制和粘贴十六进制、HSL/HSLa或RGB/RGBA表示。
CSS3的另一个与颜色相关的功能是支持alpha通道和透明度。这基本上让能够控制任何元素的透明度——从文本到背景到整个div——从完全不透明到完全透明，以及两者之间的任何状态。
为了演示，从一个包含一些文本的简单div开始。
<div id="container1">
<span id="left">I</span>
<span id="center">♥</span>
<span id="right">Opacity</span>
</div>
将从一个没有透明度设置的例子开始，然后添加一个为整个div设置透明度的变体。（注意，为了清晰起见，省略了一些样式，如宽度、对齐等。）
#noopacity {
background: silver;
}
#basicopacity {
background: silver;
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
-khtml-opacity: 0.7;
}
在这里，使用了透明度设置。透明度值范围从0.0（完全透明）到1.0（完全不透明）。在这种情况下，已经将透明度应用于整个div，包括文本。还包括了-moz、-webkit和-khtml前缀设置，以兼容FireFox、Safari/Chrome和旧版Safari浏览器实现。
CSS3确实允许将透明度指定为RGBa或HSLa颜色设置中的alpha通道。在这种情况下，使用rgba而不是rgb或hsla而不是hsl进行设置，并为alpha通道（透明度）值添加第四个参数。例如，让只将透明度应用于div的背景：
#rgbaopacity {
background: rgba(192, 192, 192, 0.7);
}
结果是直接的。请注意，在这种情况下，文本保持完全不透明，而背景变得有些透明。
渐变是可以开始使用的另一个CSS3功能，尽管实现在不同的浏览器中有所不同，需要应用浏览器特定的前缀。然而，各种渐变实现确实接受使用所有CSS3技术的颜色规范，从保留的颜色关键字到RGBa和HSLa。
#lineargradient {
background: -moz-linear-gradient(top, silver 0%, white 100%);
background: -webkit-gradient(linear, left top, left bottom, from(silver), to(white));
}
在这种情况下，只是从银色过渡到白色。然而，完全有可能使用alpha通道在渐变中使用透明度。
#container5 {
background: -moz-linear-gradient(top, rgba(192, 192, 192, 0.8), rgba(255, 255, 255, 0.0));
background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 192, 192, 0.8)), to(rgba(255, 255, 255, 0.0)));
}