CSS - 属性值

属性的值

颜色

可以通过预定义颜色关键字或以十六进制、RGB、HSL、RGBA、HSLA等格式为CSS属性指定颜色。
在实践中，定义CSS颜色更常规的方法是使用十六进制格式（hex）（目前为止最常见方法）或RGB格式。
要指定alpha透明度的情况除外，这时应该用RGBA和HSLA格式。

16个基本颜色关键字

RGB

通过红、绿、蓝的量来构建自己的颜色。
可以使用百分数、0~255之间的数字来指定三种颜色的值。

color： rgb(0,125,255);	//红、绿、蓝

十六进制数

color： #59007f;

如果一个十六进制的颜色是由三队重复的数字组成的，如color: #ff3344，可以缩写成#f34。

RGBA

RGBA在RGB基础上加了一个代表alpha透明度（alpha transparency）的A。
alpha透明度的一种常见使用场景是将其用在对元素设置background-color或background的情况（均用于设置背景）
因为alpha透明度允许元素下面的任何东西（图像、其他颜色、文本等）透过来并于元素混合在一起。
也可以对其他基于颜色的属性使用alpha透明度，如color、border、border-color、box-shadow、text-shadow等。
IE9之前的Internet Explorer不支持。
语法：

property： rgba(red,green,blue,alpha transparency);

透明度在0~1之间。
越接近0越透明，0为完全透明。

HSL & HSLA

CSS3中新增的，除RGBA外另一种为颜色设置alpha透明度的方式。
HSL代表色相（hue）、饱和度（saturation）、亮度（lightness）
色相的取值范围为0~360，HSL色相值沿顺时针改变。最右边为90，最低部为180，最左边为270，0和360在顶端重合。
饱和度和亮度的取值均为百分数，范围为0~100%；
HSL语法：property: hsl(hue, saturation, lightness);
HSLA语法：property: hsla(hue, saturation, lightness, alpha transparency);

在CSS中还要针对旧浏览器为段落定义备选的background-color，
方法是：

1. 先用十六进制定义一次；
2. 再用HSL重新定义一遍。

原因：Internet Explorer所有版本都理解十六进制，但IE9之前版本无法理解HSL或HSLA。旧的浏览器会忽略HSL和HSLA样式，就像忽略RGBA一样。

如何构想HSL？

Brandon Mathis：“选择一个0到360之间的色相，并将饱和度设为100，亮度设为50，就会得到这种颜色最纯的形式。降低饱和度，颜色就会向灰色变化。增加亮度，颜色就会向白色变化；减少亮度，颜色就会向黑色变化。”

红色hsl(0,100%,50%);
黄色hsl(60,100%,50%);
绿色hsl(120,100%,50%);
青色hsl(180,100%,50%);
蓝色hsl(240,100%,50%);
紫红色hsl(300,100%,50%);

《HTML5与CSS3基础教程（第8版）》 - 人民邮电出版社 7.5.6~7.5.9

本文地址：https://blog.csdn.net/Leeroys_Zzzz/article/details/107374366