CSS3新增颜色属性

来源：互联网发布：via浏览器知乎编辑：程序博客网时间：2024/05/17 06:03

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

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Keywords" content="关键词一，关键词二">    <meta name="Description" content="网站描述内容">    <meta name="Author" content="刘艳">    <title></title>    <style>        div{width:100px;height:100px;background: HSLA(0,100%,60%,0.5);}    </style></head><body>    <div></div></body></html>

效果：
这里写图片描述

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

1 0