欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-10 11:17:26
...

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仅是做一个了解。

相关标签: CSS3新增颜色属性