【CSS进阶】CSS 颜色体系详解

说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家。

先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容。

接下来的行文内容大概会按照这个顺序进行,内容十分基础,可选择性跳到相应内容处阅读。

色彩关键字

嗯,色彩关键字很好理解。它表示一个具体的颜色值,且它不区分大小写。譬如这样 color:red 的 red 即是一个色彩关键字。

在 CSS3 之前,也就是 CSS 标准 2,一共包含了 17 个基本颜色,分别是:

而到了 CSS3,色彩关键字得到了极大的扩充,达到了 147 个。下面仅仅是列出了一部分:

完整的 CSS3 色彩关键字戳我查看

值得注意的是,未知的关键字会让 CSS 属性无效。

这里的这个测试 test3 是为了说明,当传入的色彩关键字错误,CSS 属性将无效而不是使用当前的currentColor 替代。 currentColor会在下文说明。

哪些属性可以设置颜色

所有可以用到颜色值的地方,都可以用色彩关键字替代,那么在 CSS 中,什么地方可以用到颜色值呢?

  • 文本的颜色 color:red
  • 元素的背景色 background-color:red (包含各类渐变)
  • 元素的边框 border-color:red
  • 元素的盒阴影或文字阴影 box-shadow:0 0 0 1px red | text-shadow:5px 5px 5px red
  • 运用在一些滤镜当中 filter: drop-shadow(16px 16px 20px red)
  • <hr /> 水平线的颜色

一些无法直接设置,但是可以被得到或者继承当前元素 currentColor 的属性:

  • <img> 的 alt 文本。也就是,当无法显示图像时,代替图像出现的文本,会继承这个颜色值。
  • ul 列表项的小点

一些比较常见的就不举例了,说一下 <hr/> 、 <img> 的 alt 文本和 ul 列表项的小点。

经过测试, <hr/>的颜色值,可以通过设置它的 border 的颜色值来表示。

<img> 的 alt 文本和 ul 列表项的小点则会继承当前元素 currentColor 的属性。

对于表单控件 <input type="radio"> <input type="checkbox"> ,暂时没有找到很好的直接改变颜色的方法,如果有知道希望不吝赐教。

transparent

transparent 的字面意思就是透明。它用来表示一个完全透明的颜色,即该颜色看上去将是背景色。

也可以理解为它是 rgba(0,0,0,0) 的简写。

值得注意的是:

  • 在 CSS3 之前,transparent 关键字不是一个真实的颜色,只能用于 background-color 和 border-color中,表示一个透明的颜色。而在支持 CSS3 的浏览器中,它被重新定义为一个真实的颜色,transparent 可以用于任何需要 color 值的地方,像 color 属性。

那么这个透明值有什么用呢?简单列举一些例子:

transparent 用于 border,绘制三角形

这算是 transparent 最常见的一个用法,用于绘制三角形。

结合上图图1、图2,可以看到利用一个高宽为 0 的 div,设置它的 border ,当任意三边的 border 颜色为 transparent 时,则可以得到任意朝向的一个三角形。

像上文说的,由于 transparent 在低版本浏览器中(IE78)可以使用在 border、background 中,所以此方法兼容性很好,可以利用于很多场景。

transparent 用于 border,实现增大点击热区

按钮是我们网页设计中十分重要的一环,而按钮的设计也与用户体验息息相关。让用户更容易的点击到按钮无疑能很好的增加用户体验,尤其是在移动端,按钮通常都很小,但是有时由于设计稿限制,我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢?

这里,借助透明的 border 可以轻松帮我们实现(我 之前一篇文章写到过,利用伪元素也可以实现),利用一层透明的 border:20px solid transparent 我们可以这样写:

试着将光标靠近 Btn,会发现在还未到达有颜色区域之前,就已经触发了鼠标的交互响应事件 hover,利用这一点在移动端可以很好的扩大按钮的可点击区域又不至于改变按钮本身的形状。像这样:

嗯哼,这里我们将 border 用于了扩大鼠标点击区域,然而真实情况是有的时候我们的按钮必须要用到 border,而 border 又只能设置一重(无法像 box-shadow和 渐变一样设置多重 border),这个时候如果还需要运用这种方法,可以使用内阴影 box-shadow模拟一层 border,像这样:

transparent 用于 background,绘制背景图

transparent 用于 background,通常可以制造出各种各样的背景图像。这里举个简单的例子,利用透明渐变,实现一个切角图形:

通过 线性渐变 linear-gradient 实现从透明色到实色的变化,将四个四分之一大小( background-size: 50% 50%)的图形组合在一起,就生成了一个切角图形。

利用 transparent 与渐变的配合还能生成各种各样美妙的图形,可以戳下面看看:

transparent 用于文本 color

配合 box-shadow ,在文本上运用 transparent,可以营造出一种文字发光的效果,鼠标 hover 下面的文字试试:

transparent 其实还有很多作用,暂且说这么多,欢迎继续讨论。

currentColor

很多人都不知道还有 currentColor 这个东东。和 transparent 一样,它也是一个关键字,顾名思义,它表示当前颜色。它来自自属性或者继承于它的父属性。

可以简单的理解为当前 CSS 标签所继承或设定的文本颜色,即 color 的值。

那它具体可以怎么用呢,根据我们书写 CSS 的原则 DRY(Don’t Repeat Yourself),使用这个关键字可以很好的减少改动 CSS 时的工作量。看个例子:

上面的例子,我只在 color 里写了颜色,在 border 和 box-shadow 中使用了 currentColor 属性。可以看到,这两个属性的颜色值都被设置为了 color 中设置的值,当我们需要用到这种同色表现的时候,使用 currentColor 更佳,方便日后改动。

但是,currentColor 是 CSS3 新增的,在老版本浏览器下是无法识别的。那么是否在老版本浏览器下就无法使用了呢,也不尽然,还是有一些特例的,看看下面这个:

可以看到,上面我只在 color 里写了颜色,border 的值为 1px solid,box-shadow 也是,并没有带上颜色值,但是依然表现为了 currentColor 的值。这是因为边框颜色和阴影颜色默认就是当前盒子的文本颜色,其中 border 兼容性很好,可以支持到 IE6 。

当然 border 和 box-shadow 是特例,不是所有需要填写颜色值的属性不填写都会默认继承文本的值的。

那么元素中将会得到或者继承元素 color 值有哪些呢:

  1. 元素的文本内容
  2. 文本的轮廓
  3. 元素的边框
  4. 元素的盒阴影
  5. filter:drop-shadow()
  6. <img> 的 alt 文本。也就是,当无法显示图像时,代替图像出现的文本,会继承这个颜色值。
  7. 列表项的小黑点和边框
  8. 一些浏览器(比如Chrome)水平线( <hr>)的边框颜色。(没有边框的话,颜色就不会受影响)。

currentColor 的兼容性

rgb() 与 rgba()

颜色表示模型的话,简单了解一下。

rgb() 表示颜色的红-绿-蓝(red-green-blue (RGB))模式,rgba() 多一个 a ,表示其透明度,取值为 0-1。

rgb 的颜色模型通常由一个立方体表示:

我们知道,通常我们使用的时候,不使用缩写的话,使用十六进制符号 #RRGGBB,

在 #RRGGBB 中,RR 表示 红色的深浅,GG 表示绿色的深浅,BB 表示蓝色的深浅。取值都是从 00 - FF,值越大表示该颜色越深。

如果采用 rgb(RR,GG,BB) 的写法,RR 取值 0~255 或者百分比,255 相当于 100%,和十六进制符号里的 F 或 FF 。

了解了 rgb() 的含义的话,记住常用的颜色值其实是很容易的,像上面说的 RR 表示红色的深浅,那么理解记忆 #FF0000 表示为红色就 so easy 了,同理可以得到 #00FF00 表示绿色, #0000FF表示蓝色。

再记住颜色的叠加原理:

我们就可以轻松的记住, #FF00FF红蓝叠加表示紫色, #FFFF00红绿叠加表示黄色, #00FFFF蓝绿叠加表示青色。

hsl() 与 hsla()

除了 rgb 表示法,颜色也可以使用 hsl() 表示。hsl()被定义为色相-饱和度-明度(Hue-saturation-lightness),hsla() 多一个 a ,表示其透明度,取值为 0-1。。

hsl 相比 rgb 的优点是更加直观:你可以估算你想要的颜色,然后微调。它也更易于创建相称的颜色集合。

hsl 的颜色模型通常由一个圆柱体表示:

  • 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如红色、黄色等。
  • 饱和度(S)是指色彩的纯度,越高色彩越纯,低则逐渐变灰,取0-100%的数值。
  • 明度(V),亮度(L),取0-100%。

其实对于我们前端而言,使用 hsl 表示颜色会更方便。

以一个按钮为例,我们用 hsl 颜色表示法表示按钮 normal 状态下的背景色值,我们希望 hover 的时候,背景色暗一点,而 active 的时候背景色亮一点。如果采用 rgb 表示法,我们需要 3 个完全不一样的颜色,而采用 hsl 表示法,我们只需要在 hover 和 active 的时候去改的 颜色值的 l (即Light,亮度)值即可。运用上面出现过的一个例子再看看:

这里 background:hsl(200, 60%, 60%) 在 hover 和 active 的时候,我只改动了 hsl 颜色值的第三个值达到了我们希望的效果。

rgb 到 hsl 的转换

这里有个小 tips 可能有些人不知道,在开发阶段我们只有一个 rgb 值,但是希望转换成 hsl 值,使用 chrome 开发者工具可以很便捷的做到,如下图,我们只需要选中我们想转换的颜色值,按住键盘左 shift,点击这个颜色表示框,即可进行转换:

到此本文结束,比较基础,希望有人看。如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

如果本文对你有帮助,请点下推荐,写文章不容易,转载请注明出处,并贴出原文链接。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

css布局 - 九宫格布局的方法汇总(更新中...)

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个...

31320
来自专栏Crossin的编程教室

【编程课堂】海龟作图

0、前言 turtle 是 python 内置的一个比较有趣味的模块,俗称 海龟作图,它是基于 tkinter 模块打造,提供一些简单的绘图工具,海龟作图最初...

56060
来自专栏前端架构与工程

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求: 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致,则以图片中心为基点等比缩放背景图片,以适应屏幕尺寸。 以上需求...

22950
来自专栏C/C++基础

CSS中常见的长度单位

注意: (1)字体的尺寸指的是什么? 字体大小是指字在屏幕或印刷介质上表现出来的大小,将每个字看作方块,按方块的对角线长度计算大小。

16920
来自专栏阮一峰的网络日志

CSS中背景图片定位方法

上面这三句语句,都将图片定位在背景的左上角,表面上看效果是一样的,实际上第三种定位机制与前两种完全不同。

42610
来自专栏tkokof 的技术,小趣及杂念

HGE系列之九 管中窥豹(精灵动画)

这次的HGE之旅,让我们来看看精灵及动画的实现,毕竟对于一款2D游戏引擎来说,恐怕精灵和动画不是最重要的,也可算是最重要之一了吧:)

9920
来自专栏练小习的专栏

制作高大上的Canvas粒子动画

制作粒子动画效果要解决两个问题:一个是粒子动画轨迹,另外一个是粒子执行动画的时机。 首先来看下我们准备要做的粒子动画效果是怎么样的~ 是这样(粒子漂浮): ...

572100
来自专栏生信宝典

AI科研绘图(二):模式图的基本画法

经过上次对基本元素和工具的学习(AI科研绘图(一):零基础入门和基本图形绘制),我们基本上掌握了最常用和基础的工具的用法。

1.1K30
来自专栏HTML5学堂

CSS3蒙版 — 元旦快乐!

相信大家如果对PS有所了解都知道里面有蒙版遮罩层的效果,可我们在这里并不打算介绍PS的蒙版效果,而是介绍在内核为-webkit的浏览器中通过CSS3的新属性-w...

396100
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

在html5时,我用JavaScript封装了一个HTML5的canvas库。

35760

扫码关注云+社区

领取腾讯云代金券