重学前端 41 # CSS的颜色

重学前端 41 # CSS的颜色

说明

每天10分钟，重构你的前端知识体系专栏笔记。

一、介绍

这一篇来学习一下 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);

​​感兴趣的可以查看文档​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。