上面的例子，我只在 color 里写了颜色，在 border 和 box-shadow 中使用了 currentColor 属性。可以看到，这两个属性的颜色值都被设置为了 color 中设置的值，当我们需要用到这种同色表现的时候，使用 currentColor 更佳，方便日后改动。
但是，currentColor 是 CSS3 新增的，在老版本浏览器下是无法识别的。那么是否在老版本浏览器下就无法使用了呢，也不尽然，还是有一些特例的，看看下面这个：
可以看到，上面我只在 color 里写了颜色，border 的值为 1px solid，box-shadow 也是，并没有带上颜色值，但是依然表现为了 currentColor 的值。这是因为边框颜色和阴影颜色默认就是当前盒子的文本颜色，其中 border 兼容性很好，可以支持到 IE6 。
当然 border 和 box-shadow 是特例，不是所有需要填写颜色值的属性不填写都会默认继承文本的值的。
那么元素中将会得到或者继承元素 color 值有哪些呢：currentColor 的兼容性
rgb() 与 rgba()
颜色表示模型的话，简单了解一下。
rgb() 表示颜色的红-绿-蓝（red-green-blue (RGB)）模式，rgba() 多一个 a ，表示其透明度，取值为 0-1。
rgb 的颜色模型通常由一个立方体表示：
我们知道，通常我们使用的时候，不使用缩写的话，使用十六进制符号 #RRGGBB,
在 #RRGGBB 中，RR 表示 红色的深浅，GG 表示绿色的深浅，BB 表示蓝色的深浅。取值都是从 00 - FF，值越大表示该颜色越深。
如果采用 rgb(RR,GG,BB) 的写法，RR 取值 0~255 或者百分比，255 相当于 100%，和十六进制符号里的 F 或 FF 。
了解了 rgb() 的含义的话，记住常用的颜色值其实是很容易的，像上面说的 RR 表示红色的深浅，那么理解记忆 #FF0000 表示为红色就 so easy 了，同理可以得到 #00FF00 表示绿色， #0000FF表示蓝色。
再记住颜色的叠加原理：
我们就可以轻松的记住， #FF00FF红蓝叠加表示紫色， #FFFF00红绿叠加表示黄色， #00FFFF蓝绿叠加表示青色。
hsl() 与 hsla()
除了 rgb 表示法，颜色也可以使用 hsl() 表示。hsl()被定义为色相-饱和度-明度（Hue-saturation-lightness），hsla() 多一个 a ，表示其透明度，取值为 0-1。。
hsl 相比 rgb 的优点是更加直观：你可以估算你想要的颜色，然后微调。它也更易于创建相称的颜色集合。
hsl 的颜色模型通常由一个圆柱体表示：
其实对于我们前端而言，使用 hsl 表示颜色会更方便。
以一个按钮为例，我们用 hsl 颜色表示法表示按钮 normal 状态下的背景色值，我们希望 hover 的时候，背景色暗一点，而 active 的时候背景色亮一点。如果采用 rgb 表示法，我们需要 3 个完全不一样的颜色，而采用 hsl 表示法，我们只需要在 hover 和 active 的时候去改的 颜色值的 l （即Light，亮度）值即可。运用上面出现过的一个例子再看看：
这里 background:hsl(200, 60%, 60%) 在 hover 和 active 的时候，我只改动了 hsl 颜色值的第三个值达到了我们希望的效果。
rgb 到 hsl 的转换
这里有个小 tips 可能有些人不知道，在开发阶段我们只有一个 rgb 值，但是希望转换成 hsl 值，使用 chrome 开发者工具可以很便捷的做到，如下图，我们只需要选中我们想转换的颜色值，按住键盘左 shift，点击这个颜色表示框，即可进行转换：
到此本文结束，比较基础，希望有人看。如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
如果本文对你有帮助，请点下推荐，写文章不容易。
相关文章
精彩导读
热门资讯
关注我们
