元素的边框 border-color:red

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

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

• ul 列表项的小点

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

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

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

值得注意的是:

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

transparent 用于 border，绘制三角形

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

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

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

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

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

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

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

currentColor

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

上面的例子，我只在 color 里写了颜色，在 border 和 box-shadow 中使用了 currentColor 属性。可以看到，这两个属性的颜色值都被设置为了 color 中设置的值，当我们需要用到这种同色表现的时候，使用 currentColor 更佳，方便日后改动。

可以看到，上面我只在 color 里写了颜色，border 的值为 1px solid，box-shadow 也是，并没有带上颜色值，但是依然表现为了 currentColor 的值。这是因为边框颜色和阴影颜色默认就是当前盒子的文本颜色，其中 border 兼容性很好，可以支持到 IE6 。

那么元素中将会得到或者继承元素 color 值有哪些呢：

1. 元素的文本内容
2. 文本的轮廓
3. 元素的边框
4. 元素的盒阴影
5. filter:drop-shadow
6. <img>的 alt 文本。也就是，当无法显示图像时，代替图像出现的文本，会继承这个颜色值。
7. 列表项的小黑点和边框
8. 一些浏览器（比如Chrome）水平线（ <hr>）的边框颜色。（没有边框的话，颜色就不会受影响）。

颜色表示模型的话，简单了解一下。

rgb 的颜色模型通常由一个立方体表示：

在 #RRGGBB 中，RR 表示 红色的深浅，GG 表示绿色的深浅，BB 表示蓝色的深浅。取值都是从 00 - FF，值越大表示该颜色越深。

了解了 rgb 的含义的话，记住常用的颜色值其实是很容易的，像上面说的 RR 表示红色的深浅，那么理解记忆 #FF0000表示为红色就 so easy 了，同理可以得到#00FF00表示绿色，#0000FF表示蓝色。

我们就可以轻松的记住， #FF00FF红蓝叠加表示紫色，#FFFF00红绿叠加表示黄色，#00FFFF蓝绿叠加表示青色。

除了 rgb 表示法，颜色也可以使用 hsl 表示。hsl被定义为色相-饱和度-明度（Hue-saturation-lightness），hsla 多一个 a ，表示其透明度，取值为 0-1。。

hsl 的颜色模型通常由一个圆柱体表示：

• 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
• 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取0-100%的数值。
• 明度（V），亮度（L），取0-100%。

以一个按钮为例，我们用 hsl 颜色表示法表示按钮 normal 状态下的背景色值，我们希望 hover 的时候，背景色暗一点，而 active 的时候背景色亮一点。如果采用 rgb 表示法，我们需要 3 个完全不一样的颜色，而采用 hsl 表示法，我们只需要在 hover 和 active 的时候去改的 颜色值的 l （即Light，亮度）值即可。运用上面出现过的一个例子再看看：

rgb 到 hsl 的转换

到此本文结束，比较基础，希望有人看。如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

如果本文对你有帮助，请点下推荐，写文章不容易。