您的位置:

CSS 颜色编号码

一、RGB值和十六进制值

CSS颜色编号码分为两种:RGB值和十六进制值。RGB值指的是红、绿、蓝三个颜色通道的取值,取值范围从0到255。例如,红色为rgb(255,0,0);绿色为rgb(0,255,0)。而十六进制值则是用16进制数对颜色进行编码,每个颜色通道占2个十六进制位,取值范围为00到FF。例如,红色为#FF0000;绿色为#00FF00。

/* CSS中设置颜色 */
color: rgb(255,0,0);
background-color: #00FF00;

使用RGB值或十六进制值设置颜色时,需要使用color属性或background-color属性。

二、CSS3中的颜色属性

CSS3中新增了很多的颜色属性,下面介绍其中的一些。

1. RGBA和HSLA

RGBA和HSLA是RGB值和HSL值的半透明版本。它们的格式分别为:rgba(red, green, blue, alpha)和hsla(hue, saturation, lightness, alpha)。其中,alpha表示透明度,范围为0到1,0表示完全透明,1表示完全不透明。

/* 设置颜色的透明度 */
color: rgba(255,0,0,0.5);

2. 颜色名字

除了用RGB值或十六进制值设置颜色以外,还可以使用颜色的名字来设置。例如,红色可以用red来表示。

/* 使用颜色名字设置颜色 */
color: red;

3. currentColor

currentColor表示当前元素所使用的颜色。例如,如果color属性被设置为red,那么border-color属性设置为currentColor将会继承red的颜色值。

/* 继承元素的颜色 */
color: red;
border-color: currentColor;

三、CSS4中的颜色属性

CSS4中又新增了一些有趣的颜色属性,下面介绍其中的一些。

1. rebeccapurple

rebeccapurple是CSS4中新增的一种颜色名字,表示紫色。它是为了纪念Web标准先驱Rebecca Murphey而创建的。

/* 使用rebeccapurple设置颜色 */
color: rebeccapurple;

2. gray()

gray()函数可以用来快速设置一种灰色,它的参数表示灰度值,范围为0到100。例如,gray(50%)表示50%灰度的灰色。

/* 快速设置灰色 */
color: gray(50%);

3. color-mod()

color-mod()函数可以对颜色进行操作,包括调整亮度、对比度、透明度等。

/* 修改颜色的透明度 */
color: color-mod(red alpha(0.5));

四、总结

CSS颜色编号码包括RGB值和十六进制值,CSS3中新增了RGBA、HSLA等颜色属性,CSS4中又新增了rebeccapurple、gray()和color-mod()等颜色属性,这些属性可以让我们更加方便地设置颜色,并且对于颜色的处理也更加灵活。