博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
重学前端学习笔记(四十一)--CSS的颜色
阅读量:5327 次
发布时间:2019-06-14

本文共 952 字,大约阅读时间需要 3 分钟。

笔记说明

重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入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

你可能感兴趣的文章
ssh服务器安装测试
查看>>
【python 类】【部分转发】设计模式 -- 责任链模式 (类之间的联动)
查看>>
[Swift]Array(数组)扩展
查看>>
Jtable 表格按多列排序(支持中文汉字排序)
查看>>
本地idea运行spark,A master URL must be set in your configuration
查看>>
python中的下划线
查看>>
Linux连接Internet
查看>>
[TypeScript] Create a fluent API using TypeScript classes
查看>>
Java异步多线程编程探索之CompletableFuture
查看>>
C# 面向对象初级 (参考传智播客视频)
查看>>
阳光下的挣扎
查看>>
C++11模板友元语法
查看>>
sql 备份 语句(全)
查看>>
Zabbix 微信报警Python版(带监控项波动图片)
查看>>
WEBFORM--第一讲
查看>>
String类
查看>>
NGINX引入线程池 性能提升9倍
查看>>
Frank-Cucumber - Step Definition compendium (转载)
查看>>
select 操作
查看>>
2019.03.30 图解HTTP
查看>>