css 中用来表示颜色的属性和方法

CSS 中的颜色可以通过以下方法指定：

• 十六进制颜色
• 带透明度的十六进制颜色
• RGB 颜色
• RGBA 颜色
• HSL 颜色
• HSLA 颜色
• 预定义/跨浏览器的颜色名称
• 使用 currentcolor 关键字

1. 十六进制颜色

#p1 {background-color: #ff0000;}   /* 红色 */
#p2 {background-color: #00ff00;}   /* 绿色 */
#p3 {background-color: #0000ff;}   /* 蓝色 */

2.带透明度的十六进制颜色

#p1a {background-color: #ff000080;}   /* 带透明度的红色 */
#p2a {background-color: #00ff0080;}   /* 带透明度的绿色 */
#p3a {background-color: #0000ff80;}   /* 带透明度的蓝色 */

3. RGB 颜色

#p1 {background-color: rgb(255, 0, 0);}   /* 红色 */
#p2 {background-color: rgb(0, 255, 0);}   /* 绿色 */
#p3 {background-color: rgb(0, 0, 255);}   /* 蓝色 */

4.RGBA 颜色

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* 带不透明度的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* 带不透明度的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* 带不透明度的蓝色 */

5. HSL 颜色

HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。

使用 hsl() 函数指定 HSL 颜色值，该函数的语法如下：

hsl(hue, saturation, lightness)

• 色相是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。
• 饱和度是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。
• 亮度也是一个百分比； 0％ 是黑色，100％ 是白色。

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* 柔和的绿色 */

6.HSLA 颜色

第四个参数是透明度

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* 带不透明度的绿色 */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* 带不透明度的浅绿色 */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* 带不透明度的深绿色 */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* 带不透明度的柔绿色 */

7. 预定义/跨浏览器的颜色名称

HTML 和 CSS 颜色规范中预定义了 140 个颜色名称。

例如：blue、red、coral、brown 等：

#p1 {background-color: blue;}
#p2 {background-color: red;}

8. 使用 currentcolor 关键字

currentcolor 关键字引用元素的 color 属性值。

#myDIV {
  color: blue; /* 蓝色文本色 */
  border: 10px solid currentcolor; /* 蓝色边框色 */
}