CSS3 教程
CSS3提供了几种定义颜色值的新方法。
在CSS3中定义颜色
在上一节中，您学习了如何使用color关键字和RGB表示法定义颜色。除此之外CSS3增加了对作为元素设置颜色值的一些新的功能的符号rgba()，hsl()和hsla()。
在以下部分中，我们将逐一讨论这些颜色模型。
RGBA颜色值
可以使用rgba()功能符号在RGBA模型（红色-绿色-蓝色-alpha）中定义颜色。RGBA颜色模型是具有alpha通道的RGB颜色模型的扩展，用于指定颜色的不透明度。
alpha参数接受从0.0（完全透明）到1.0（完全不透明）的值。
h1 {
color: rgba(0,0,255,0.5);
}
p {
background-color: rgba(0%,0%,100%,0.3);
}
HSL颜色值
颜色也可以使用hsl()功能符号定义为HSL模型（色相-饱和度-亮度）。色相表示为色轮或圆形（即以圆形表示的彩虹）的角度（从0到360）。该角度以较少的单位数给出，因为该角度通常以度为单位进行度量，以致该单位隐含在CSS中。
饱和度和亮度以百分比表示。100%饱和度表示全彩，并且0%是灰色阴影。然而，100%亮度为白色，0%亮度是黑色，50%亮度是正常的。查看以下示例：
h1 {
color: hsl(360,70%,60%);
}
p {
background-color: hsl(480,50%,80%);
}
提示：通过定义 red=0=360，其他颜色分布在圆周围，因此green=120，blue=240，依此类推。作为一个角度，它隐式环绕，使得-120=240，480=120,以此类推。
HSLA颜色值
可以使用hsla()功能符号在HSLA模型（色调饱和度-亮度-alpha）中定义颜色。HSLA颜色模型是具有Alpha通道的HSL颜色模型的扩展，该Alpha通道指定了颜色的不透明度。
alpha参数接受从0.0（完全透明）到1.0（完全不透明）的值。
h1 {
color: hsla(360,80%,50%,0.5);
}
p {
background-color: hsla(480,60%,30%,0.3);
}
相关视频
24小时阅读榜
精品课程
共22课时
24.3万人学习
共28课时
36.2万人学习
共89课时
133.1万人学习
热门下载
集成PHP7，16种组合，超全大合集
下载
phpStudy安装所需运行库集合下载
下载
程序员工具箱 v1.0 php集成环境
下载
中文版，非常好用
下载
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
Win64位，支持php多版本共存
下载