CSS 3支持的颜色表示方法

　　CSS 2已经提供了多种颜色表示方法，如字符串形式的颜色名、十六进制的颜色值等。但CSS 2不允许为颜色设置透明度，因此显得有些不够完善。CSS 3则提供了更多的颜色表示方法，从而提供了更完善的颜色表示方法。
　　总结起来，CSS 2、CSS 3一共支持如下几种颜色表示方法。
　　➢　用颜色名表示，例如white（白色）、red（红色）、greenyellow（绿黄色）、gold（金色）等。这种方式简单、易用，但它能表示的颜色数量有限——不可能为所有颜色都指定一个名称。
　　➢　用十六进制的颜色值表示，这就是典型的三原色混合原理，例如#FF0000，其中前两位FF表示红光的值——也就是把红光分成0～255个色阶，其中00表示没有红光，FF（就是255）表示红光值最大；中间两位表示绿光的值，为0；后面两位表示蓝光的值，为0；三种光混合成红色。实际上也可以把红、绿、蓝只分为0～15个色阶，这样使用3位十六进制数即可表示。例如#0F0，其中第一位表示红光的值为0，第二位表示绿光的值为F（就是15），表示绿光的值最大，最后一位表示蓝光的值为0，三种光混合成绿色。
　　➢　用rgb(r,g,b)函数表示，这也是三原色混合原理。例如rgb(255, 255, 0)，红光的值为255（最大值）、绿光的值也是255（最大值）、蓝光的值为0，混合出来的颜色就是黄色。
　　➢　用hsl(Hue,Saturation,Lightness)函数表示，这是用色调、饱和度、亮度控制的颜色。例如hsl(120, 100%, 100%)，其中色调为120，也就是绿色（色调0代表红色、120代表绿色、240代表蓝色），饱和度、亮度都是100%，因此这就是绿色。
　　➢　用rgba(r,g,b,a)函数表示，这还是三原色混合原理。与rgb(r,g,b)函数相似，只是多了一个a参数，用于指定该颜色的透明度，a参数可以是0～1之间的任意数，其中0代表完全透明。
　　➢　用hsla(Hue,Saturation,Lightness,alpha)函数表示，这也是用色调、饱和度、亮度控制的颜色。与hsl(Hue,Saturation,Lightness)相比就是多了一个alpha参数，用于指定该颜色的透明度，alpha参数可以是0～1之间的任意数，其中0代表完全透明。

例子
<!DOCTYPE html>  
<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 颜色表示方式 </title>
    <style type="text/css">
        div>div{
            width: 400px;
            height: 40px;
        }
    </style>
</head>  
<body<script type="text/javascript">  
    for (var i = 0; i < 110 ; i++)
    {
        document.write("测试文字");
    }
</script>>

<div style="position:absolute;top:0px">  
    <div style="background-color:gray;">background-color:gray</div>
    <div style="background-color:#aaa;">background-color:#aaa;</div>
    <div style="background-color:#ffff00;">background-color:#ffff00;</div>
    <div style="background-color:rgb(255, 0 , 255);">
        background-color:rgb(255, 0 , 255);</div>
    <div style="background-color:hsl(120, 80%, 50%);">
        background-color:hsl(120, 80%, 50%);</div>
    <div style="background-color:rgba(255, 0 , 255 , 0.5);"></div>
    <div style="background-color:hsla(120, 80%, 50% , 0.5);"></div>
</div>  
</body>  
</html>

注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。