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

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

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

  色彩关键字

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

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

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

完整的 CSS3 色彩关键字戳我查看

值得注意的是，未知的关键字会让 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 的字面意思就是透明。它用来表示一个完全透明的颜色，即该颜色看上去将是背景色。

也可以理解为它是 rgba(0,0,0,0) 的简写。

值得注意的是:

在 CSS3 之前，transparent 关键字不是一个真实的颜色，只能用于 background-color 和 border-color中，表示一个透明的颜色。而在支持 CSS3 的浏览器中，它被重新定义为一个真实的颜色，transparent 可以用于任何需要 color 值的地方，像 color 属性。

那么这个透明值有什么用呢？简单列举一些例子：

transparent 用于 border，绘制三角形

这算是 transparent 最常见的一个用法，用于绘制三角形。

结合上图图1、图2，可以看到利用一个高宽为 0 的 div，设置它的 border ，当任意三边的 border 颜色为 transparent 时，则可以得到任意朝向的一个三角形。

像上文说的，由于 transparent 在低版本浏览器中（IE78）可以使用在 border、background 中，所以此方法兼容性很好，可以利用于很多场景。

  transparent 用于 border，实现增大点击热区

按钮是我们网页设计中十分重要的一环，而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验，尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？

这里，借助透明的 border 可以轻松帮我们实现（我 之前一篇文章写到过，利用伪元素也可以实现），利用一层透明的 border:20px solid transparent 我们可以这样写：

试着将光标靠近 Btn，会发现在还未到达有颜色区域之前，就已经触发了鼠标的交互响应事件 hover，利用这一点在移动端可以很好的扩大按钮的可点击区域又不至于改变按钮本身的形状。像这样：

嗯哼，这里我们将 border 用于了扩大鼠标点击区域，然而真实情况是有的时候我们的按钮必须要用到 border，而 border 又只能设置一重（无法像 box-shadow和 渐变一样设置多重 border），这个时候如果还需要运用这种方法，可以使用内阴影 box-shadow模拟一层 border，像这样：

  transparent 用于 background，绘制背景图

transparent 用于 background，通常可以制造出各种各样的背景图像。这里举个简单的例子，利用透明渐变，实现一个切角图形：

通过 线性渐变 linear-gradient 实现从透明色到实色的变化，将四个四分之一大小（ background-size: 50% 50%）的图形组合在一起，就生成了一个切角图形。

利用 transparent 与渐变的配合还能生成各种各样美妙的图形，可以戳下面看看：

CSS3奇思妙想

CSS3 Patterns Gallery

  transparent 用于文本 color

配合 box-shadow ，在文本上运用 transparent，可以营造出一种文字发光的效果，鼠标 hover 下面的文字试试：

transparent 其实还有很多作用，暂且说这么多，欢迎继续讨论。

  currentColor

很多人都不知道还有 currentColor 这个东东。和 transparent 一样，它也是一个关键字，顾名思义，它表示当前颜色。它来自自属性或者继承于它的父属性。

可以简单的理解为当前 CSS 标签所继承或设定的文本颜色，即 color 的值。

那它具体可以怎么用呢，根据我们书写 CSS 的原则 DRY(Don’t Repeat Yourself)，使用这个关键字可以很好的减少改动 CSS 时的工作量。看个例子：