当前位置:Gxlcms > html代码 > CSS3新增颜色属性_html/css_WEB-ITnose

CSS3新增颜色属性_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:5人阅读

CSS颜色属性复习

color name 颜色英文名称命名(如red,blue,pink,white等)
HEX方式 十六进制方式(#FF0000,#B9B9B9等)
rgb方式 三原色配色方式(rgb(255,0,00))

这几种方式都是常用到的颜色属性,本人使用较多的是HEX方式。CSS3中新增了几种颜色属性。

CSS3新增颜色属性

1、RGBA模式
2、HSL模式
3、HSLA模式

1、RGBA模式
rgba在之前一遍博客中已经提及过,a表示的是透明度,取值范围为0~1,rgb分别是红绿蓝三色,取值范围均为0~255.
2、HSL模式
H: Hue(色调)。
0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360
S: Saturation(饱和度)。取值为:0.0% - 100.0%
L: Lightness(亮度)。取值为:0.0% - 100.0%
3、HSLA模式
HSL与HSL模式的相同,增加A,即透明度
A: alpha 透明度 0~1之间

HSL的色轮如下:

举例看个HSLA

                            

效果:

个人觉得HSL与RGB和HEX相比,颜色更容易记忆,但是鉴于通过我们都是使用取色器,所以觉得意义不大,还是会继续使用RGBA和HEX方式。而HSL和HSLA仅是做一个了解。

人气教程排行