【CSS进阶】CSS 颜色体系详解

说到 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 最多见的一个用法，用于绘制三角形。

结合上图图一、图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 时的工做量。看个例子：

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

可是，currentColor 是 CSS3 新增的，在老版本浏览器下是没法识别的。那么是否在老版本浏览器下就没法使用了呢，也不尽然，仍是有一些特例的，看看下面这个：

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

固然 border 和 box-shadow 是特例，不是全部须要填写颜色值的属性不填写都会默认继承文本的值的。

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

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

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 的颜色模型一般由一个圆柱体表示：

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

其实对于咱们前端而言，使用 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，点击这个颜色表示框，便可进行转换：

 

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

若是本文对你有帮助，请点下推荐，写文章不容易，转载请注明出处，并贴出原文连接。