重学前端 41 # CSS的颜色

简介: 重学前端 41 # CSS的颜色

一、介绍


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



二、颜色的原理


2.1、RGB 颜色


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



aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL3Jlc291cmNlL2ltYWdlLzdmL2ExLzdmNWJmMzljYmU0NGUzNjc1ODY4M2E2NzRmOWZjZmExLnBuZw.png



2.2、CMYK 颜色


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

aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL3Jlc291cmNlL2ltYWdlLzE1LzFiLzE1ZmVmZTlmODBlYzhlMWY3YmQ5ZWNkMjIzZmViNjFiLnBuZw.png

2.3、HSL 颜色

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


aHR0cHM6Ly9zdGF0aWMwMDEuZ2Vla2Jhbmcub3JnL3Jlc291cmNlL2ltYWdlL2EzL2NlL2EzMDE2YTZmZjE3ODg3MGQ2ZGJhMjNmODA3YjBkZmNlLnBuZw.png

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);


感兴趣的可以查看文档

目录
相关文章
|
2月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
15天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
27 6
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
27 4
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
221 1
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
70 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
25 2
|
2月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
19 1
|
2月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
21 1
|
2月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
17 0