css3新增颜色属性

css3新增属性🔑

• 边框属性
• 背景属性
• 文本属性
• 颜色属性

颜色属性值🔨

• color：<name-color>。例如：red、green、blue...

• color：<hex-color>。例如：#eee、#ccc、#333...

• color：<rgb()>。例如：rgb(255,120,199)...

• color：<hsl()>

HSL 模式💡

取值：

• H： Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
• S： Saturation(饱和度)。取值为：0.0% - 100.0%
• L： Lightness(亮度)。取值为：0.0% - 100.0%

/* 以下方式可以使得文本显示为红色 */
p { color: red; }
p { color: #f00; }
p { color: #ff0000; }
p { color: rgb(255,0,0); }
p { color: rgb(100%, 0%, 0%); }
p { color: hsl(0, 100%, 50%); }

HSLA 模式💡

• A： Alpha透明度。取值0~1之间。

/* 50%透明 */
p { color: #ff000080; }
p { color: rgba(255, 0, 0, 0.5); }
p { color: hsla(0, 100%, 50%, 0.5); }