重学前端学习笔记（四十一）--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

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

重学前端学习笔记（二十二）--选择器的机制
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端-学习笔记-JavaScript对象
说明重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端学习笔记（八）--JavaScript中的原型和类
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端学习笔记（十三）--浏览器工作解析（三）
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
重学前端学习笔记（五）-JavaScript原型
JavaScript原型中文中有个成语叫做"照猫画虎",这里的猫看起来就是虎的原型. 最为成功的流派是使用"类"的方式来描述对象,这诞生了诸如 C++.Jav ...
Web前端学习笔记（十一）---聚光灯效果
Demo展示源代码 index.html <!DOCTYPE html> <html lang="zh-Hans-CN"> <head>< ...
云e办前端学习笔记（十一）员工基本资料管理
前言本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...
重学前端，万字入门 HTML+CSS+响应式网页设计
响应式网页设计认证 | freeCodeCamp.org 观前提醒:擅用 Ctrl+F,笔记不求详细,但求理解,部分难以理解的内容我给了实例或者文档的链接,还有一些我推荐的小游戏,希望能给个三连
前端学习第四天——CSS
目录 1.Emment语法 1.1快速生成HTML结构语法 1.2快速生成CSS样式语法(MAC不行) 1.3快速格式化代码 2.CSS的复合选择器 2.1什么是复合选择器 2.2后代选择器(重要) ...

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

笔记说明

一、介绍

二、颜色的原理

2.1、RGB 颜色

2.2、CMYK 颜色

2.3、HSL 颜色

2.4、其它颜色

三、渐变

3.1、线性渐变

3.2、放射性渐变

感兴趣的可以查看文档

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

最新文章

热门文章