颜色教程
颜色通过组合红色、绿色和蓝色光来显示。
颜色名称
在 CSS 中，可以使用颜色名称来设置颜色。
CSS 颜色值
在 CSS 中，可以使用不同的方式指定颜色。
- 使用颜色名称
- 使用 RGB 值
- 使用十六进制值
- 使用 HSL 值（CSS3）
- 使用 HWB 值（CSS4）
- 使用
currentcolor关键字
RGB 颜色
RGB 颜色值在所有浏览器中都受支持。
RGB 颜色值使用以下格式指定：rgb( RED , GREEN , BLUE )。
每个参数都定义了颜色的强度，以 0 到 255 之间的整数表示。
例如，rgb(0,0,255) 将渲染为蓝色，因为蓝色参数设置为其最高值（255），而其他参数设置为 0。
灰色阴影通常使用所有 3 个光源的相等值来定义
十六进制颜色
十六进制颜色值在所有浏览器中都受支持。
十六进制颜色使用以下格式指定：#RRGGBB.
RR（红色）、GG（绿色）和 BB（蓝色）是介于 00 和 FF 之间的十六进制整数，指定颜色的强度。
例如，#0000FF 将显示为蓝色，因为蓝色分量设置为其最高值（FF），而其他分量设置为 00。
灰色阴影通常使用所有 3 个光源的相等值来定义
示例
| 颜色 | HEX | RGB | 颜色 |
|---|---|---|---|
| #000000 | rgb(0,0,0) | 黑色 | |
| #808080 | rgb(128,128,128) | 灰色 | |
| #FFFFFF | rgb(255,255,255) | 白色 |
大写还是小写？
可以使用大写或小写字母来指定十六进制值。
小写字母更容易书写。大写字母更容易阅读。
颜色名称
CSS 支持 140 个标准颜色名称。
在下一章中，您将找到一个完整的颜色名称字母顺序列表，其中包含十六进制值。
| 颜色名称 | Hex | 颜色 |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
currentcolor 关键字
currentcolor 关键字指的是元素颜色属性的值。
示例
以下 <div> 元素的边框颜色将为蓝色，因为 <div> 元素的文本颜色为蓝色
#myDIV {
color: blue; /* 蓝色文本颜色 */
border: 10px solid currentcolor; /* 蓝色边框颜色 */
}
亲自尝试 »
