CSS颜色体系学习小结(推荐)

说到 CSS 颜色，相比大家都不会陌生，本文是我个人对 CSS 颜色体系的一个系统总结与学习，分享给大家。

先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。

接下来的行文内容大概会按照这个顺序进行，内容十分基础，可选择性跳到相应内容处阅读。

色彩关键字

嗯，色彩关键字很好理解。它表示一个具体的颜色值，且它不区分大小写。譬如这样color:red的 red 即是一个色彩关键字。

在 CSS3 之前，也就是CSS 标准 2，一共包含了 17 个基本颜色，分别是：

而到了 CSS3，色彩关键字得到了极大的扩充，达到了 147 个。下面仅仅是列出了一部分:

值得注意的是，未知的关键字会让 CSS 属性无效。

这里的这个测试 test3 是为了说明，当传入的色彩关键字错误，CSS 属性将无效而不是使用当前的currentColor替代。currentColor会在下文说明。

哪些属性可以设置颜色

所有可以用到颜色值的地方，都可以用色彩关键字替代，那么在 CSS 中，什么地方可以用到颜色值呢？

文本的颜色color:red

元素的背景色background-color:red（包含各类渐变）

元素的边框border-color:red

元素的盒阴影或文字阴影box-shadow:0 0 0 1px red|text-shadow:5px 5px 5px red

运用在一些滤镜当中filter: drop-shadow(16px 16px 20px red)

<hr />水平线的颜色

一些无法直接设置，但是可以被得到或者继承当前元素 currentColor 的属性：

<img>的 alt 文本。也就是，当无法显示图像时，代替图像出现的文本，会继承这个颜色值。

ul 列表项的小点

一些比较常见的就不举例了，说一下<hr/>、<img>的 alt 文本和 ul 列表项的小点。

经过测试，<hr/>的颜色值，可以通过设置它的 border 的颜色值来表示。

<img>的 alt 文本和 ul 列表项的小点则会继承当前元素 currentColor 的属性。

对于表单控件<input type="radio"><input type="checkbox">，暂时没有找到很好的直接改变颜色的方法，如果有知道希望不吝赐教。

transparent

transparent 的字面意思就是透明。它用来表示一个完全透明的颜色，即该颜色看上去将是背景色。