《重学前端》学习笔记Day124

CSS渲染：CSS是如何绘制颜色的？

颜色的原理

最常见的颜色相关的属性就是 color 和 background-color。

RGB颜色

最常见的颜色表示法是RGB颜色，它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。

为什么是这三种颜色呢？这跟人类的视觉神经系统相关，人类的视觉神经分别有对红、黄、绿三种颜色敏感的类型。人对红色最为敏感，所以危险信号提示一般会使用红色。
红绿蓝三种颜色的光混合起来就是白光，没有光就是黑暗，所以在RGB表示法中，三色数值最大表示白色，三色数值为0表示黑色。

CMYK颜色

小时候美术课可能听过“红黄蓝”三原色的说法，其实实际上，颜色显示颜色的原理是它吸收了所有别的颜色的光，只反射一种颜色，所以颜色的三原色其实是红、黄、绿的补色，也就是：品红、黄、青。因为它们跟红黄蓝相近，所以有了这个说法。

在印刷业，使用的就是这样的三原色（品红、黄、青）来调配油墨，这种被称为CMYK，它使用四元组来表示颜色。
为什么是比三原色多了一种，其实因为黑色颜料价格最低，而红、黄、青颜料价格比较贵，所以用三原色调配黑色，经济上是最不划算的，所以印刷时会单独指定黑色。

HSL颜色

人类对于颜色的认知并非来来自自己的神经系统，当把阳光散射，可以得到七色光，红橙黄绿蓝靛紫。实际上阳关更接近白光，它包含了所有颜色，散射之后，它是个基本连续的。所以对于人来感知，颜色远远大于红蓝绿。
因此，HSL的颜色模型就被设计出来了，它用一个值表示人类认知中的颜色。用专业的术语色相（H）,纯度（S）和明度（L），构成对一种颜色的表示。

HSL是一种语义化的颜色，所以特别推荐使用HSL颜色。

其它颜色

RGBA

渐变

在CSS中，background-image这样的属性，可以设为渐变。CSS中支持两种渐变，一种是线性渐变，一种是放射性渐变，我们先了解一下它们的基本用法：

linear-gradient(direction, color-stop1, color-stop2, ...);

direction可以是方向或是具体的角度。
color-stop是一个颜色和一个区段。

放射性渐变需要一个中心点和若干个颜色：

radial-gradient(shape size at position, start-color, ..., last-color);

形状

CSS中的很多属性还会产生形状，比如我们常见的属性：
border
box-shadow
border-radius
但是更推荐把它们当作基本的用途，border用于边框，把box-shadow用于阴影，把border-radius用于圆角。所有其他的场景，都可以使用更好的替代品：datauri+svg。

此文章为7月Day27学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪