笔记说明
重学前端是程劭非(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);
复制代码