重学前端学习笔记（四十一）--CSS的颜色

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、介绍

这一篇来学习一下 CSS 的渲染相关的属性。讲一讲颜色。

二、颜色的原理

2.1、RGB 颜色

计算机中，最常见的颜色表示法是 RGB 颜色，它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。多用 0 - 255 的数字表示每一种颜色，这正好占据了一个字节，每一个颜色就占据三个字节。在 RGB 表示法中，三色数值最大表示白色，三色数值为 0 表示黑色。

2.2、CMYK 颜色

在印刷行业，使用的就是三原色（品红、黄、青）来调配油墨，这种颜色的表示法叫做 CMYK，它用一个四元组来表示颜色。

2.3、HSL 颜色

HSL 它用一个值来表示人类认知中的颜色，用专业的术语叫做色相（H）。加上颜色的纯度（S）和明度（L），就构成了一种颜色的表示。

2.4、其它颜色

1、RGBA

Red（红色）、Green（绿色）、Blue（蓝色）和 Alpha 的色彩空间。RGBA 颜色被用来表示带透明度的颜色，实际上，Alpha 通道类似一种颜色值的保留字。在 CSS 中，Alpha 通道被用于透明度，所以颜色表示被称作 RGBA，而不是 RGBO（Opacity）。

2、为了方便使用，CSS 还规定了名称型的颜色，它内置了大量（140 种）的颜色名称。

三、渐变

在 CSS 中，background-image这样的属性，可以设为渐变。CSS 中支持两种渐变，一种是线性渐变，一种是放射性渐变。

3.1、线性渐变

linear-gradient(direction, color-stop1, color-stop2, ...);
复制代码

3.2、放射性渐变

radial-gradient(shape size at position, start-color, ..., last-color);
复制代码

感兴趣的可以查看文档

转载于:https://juejin.im/post/5d28880e51882554c007b7d0