css3颜色color – CSS3高级教程-srcmini

上一章CSS3高级教程请查看：css3边界border

CSS3提供了几种定义颜色值的新方法。

在CSS3中定义颜色

在前一节中，你学习了如何使用颜色关键字和RGB表示法定义颜色。此外，CSS3还添加了一些新的函数符号，用于为rgba()、hsl()和hsla()等元素设置颜色值。

在下一节中，我们将逐一讨论这些颜色模型。

可以使用RGBA()函数表示法在RGBA模型(红-绿-蓝-alpha)中定义颜色。RGBA颜色模型是一个扩展的RGB颜色模型与alpha通道-它指定的不透明度的颜色。

alpha参数接受0.0(完全透明)到1.0(完全不透明)之间的值。

h1 {
    color: rgba(0,0,255,0.5);
}
p {
    background-color: rgba(0%,0%,100%,0.3);
}

颜色也可以定义高速逻辑模型HSL(hue-saturation-lightness)，使用hsl()函数符号。色调被表示为一个角度(从0到360)的色轮或圆(即彩虹代表围成一圈)。这个角是作为一个单元数量少,因为角是通常以度,单位是隐含在CSS。

饱和度和明度表示为百分数，100%饱和意味着全彩色,0%是一个灰色的阴影。明度而轻100%是白色，0%是黑色，50%的明度是正常的。看看下面的例子：

h1 {
    color: hsl(360,70%,60%);
}
p {
    background-color: hsl(480,50%,80%);
}

提示：根据定义，红色=0=360，其他颜色分布在圆形周围，所以绿色=120，蓝色=240，等等。作为一个角度，它隐含地环绕着-120=240、480=120等等。

可以使用HSLA()函数表示法在HSLA模型(颜色-饱和度-透明度-alpha)中定义颜色。HSLA颜色模型是HSL颜色模型的扩展，带有alpha通道，用于指定颜色的不透明度。

alpha参数接受0.0(完全透明)到1.0(完全不透明)之间的值。

h1 {
    color: hsla(360,80%,50%,0.5);
}
p {
    background-color: hsla(480,60%,30%,0.3);
}