CSS 颜色
CSS 提供了多种方式来指定颜色值，以下是主要的合法颜色值表示方法：
- 预定义/跨浏览器的颜色名
- 十六进制颜色和带透明度的十六进制颜色
- RGB 和 RGBA 颜色值
- HSL 和 HSLA 颜色值
- 使用
currentcolor关键字
预定义/跨浏览器的颜色名
HTML和CSS颜色规范中预定义了140个颜色名称，可以在我们的颜色名参考中查看所有预定义名称。
常用颜色关键字：black、white、red、green、blue、yellow、cyan、gray、maroon、purple等。
.p1 {background-color: MediumPurple;}
.p2 {background-color: MediumSeaGreen;}
.p3 {background-color: DodgerBlue;}
.p4 {background-color: Peru;}颜色演示效果：
- MediumSeaGreen
- MediumSeaGreen
- DodgerBlue
- Peru
十六进制颜色值
格式: #RRGGBB或#RGB(简写)，十六进制颜色值不区分大小写。
- 6位格式：
#后跟6个十六进制数字(0-9, A-F)，前两位RR表示红色，中间两位GG表示绿色，后两位BB表示蓝色。 - 3位简写：当每对数字相同时可以简写为3位，如
#00ff33可以简写为#0f3。
.p1 {background-color: #9370DB;}
.p2 {background-color: #3CB371;}
.p3 {background-color: #1E90FF;}
.p4 {background-color: #CD853F;}颜色演示效果：
- #9370DB;
- #3CB371;
- #1E90FF;
- #CD853F;
带透明度的十六进制颜色值
格式: #RRGGBBAA或#RGBA(简写)，前6位是标准的RGB十六进制值，后2位表示透明度(alpha通道)。
透明度(alpha通道)中，00表示完全透明，FF表示完全不透明。
.p1 {background-color: #9370DB33;}
.p2 {background-color: #3CB37166;}
.p3 {background-color: #1E90FF99;}
.p4 {background-color: #CD853FBB;}颜色演示效果：
- #9370DB33;
- #3CB37166;
- #1E90FF99;
- #CD853FBB;
RGB 颜色值
RGB 颜色值由rgb(red, green, blue)函数设置，每个参数取值 0-255 或 0%-100%。
.p1 {background-color: rgb(147,112,219);}
.p2 {background-color: rgb(60,179,113);}
.p3 {background-color: rgb(30,144,255);}
.p4 {background-color: rgb(205,133,63);}颜色演示效果：
- rgb(147,112,219);
- rgb(60,179,113);
- rgb(30,144,255);
- rgb(205,133,63);
RGBA 颜色值
RGBA 是 RGB 颜色值的扩展，rgba(red, green, blue, alpha)函数设置，带有 Alpha 通道指定不透明度。
.p1 {background-color: rgba(147,112,219,0.2);}
.p2 {background-color: rgba(60,179,113,0.4);}
.p3 {background-color: rgba(30,144,255,0.6);}
.p4 {background-color: rgba(205,133,63,0.8);}颜色演示效果：
- rgba(147,112,219,0.2);
- rgba(60,179,113,0.4);
- rgba(30,144,255,0.6);
- rgba(205,133,63,0.8);
HSL 颜色值
HSL 颜色值由hsl(hue, saturation, lightness)函数设置，指的是色相(hue)、饱和度(saturation)和亮度(lightness)。
- hue：色相（0-360）
- saturation：饱和度（0%-100%）
- lightness：亮度（0%-100%）
.p1 {background-color: hsl(259.63,59.78% 64.9%);}
.p2 {background-color: hsl(146.72,49.79%,46.86%);}
.p3 {background-color: hsl(209.6,100%,55.88%);}
.p4 {background-color: hsl(29.58,58.68%,52.55%);}颜色演示效果：
- hsl(259.63,59.78%,64.9%);
- hsl(146.72,49.79%,46.86%);
- hsl(209.6,100%,55.88%);
- hsl(29.58,58.68%,52.55%);
HSLA 颜色值
HSLA 是 HSL 颜色值的扩展，hsla(hue, saturation, lightness, alpha)函数设置，带有 Alpha 通道指定不透明度。
.p1 {background-color: hsla(259.63,59.78%,64.9%,0.3);}
.p2 {background-color: hsla(146.72,49.79%,46.86%,0.4);}
.p3 {background-color: hsla(209.6,100%,55.88%,0.6);}
.p4 {background-color: hsla(29.58,58.68%,52.55%,0.8);}颜色演示效果：
- hsla(259.63,59.78%,64.9%,0.3);
- hsla(146.72,49.79%,46.86%,0.4);
- hsla(209.6,100%,55.88%,0.6);
- hsla(29.58,58.68%,52.55%,0.8);
currentColor 关键字
currentColor关键字引用元素的color属性值。
.p1 {
color: #0077ff;
border: 2px solid currentColor; /* 边框颜色与文字颜色相同 */
}颜色演示效果：
color: blue;
border: 2px solid currentColor;
border: 2px solid currentColor;
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。
95
章节
148
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈