颜色值在 CSS 中应用得非常广泛,例如 color, background, border, box-shadow 等属性都接受颜色作为属性值。但是当 CSS 发展至今,颜色值的设置也变得多样化,在浏览器兼容问题的催化下,很多人对颜色值的设置越来越迷惑。本文列举了到目前为止 CSS 中颜色值设置的所有可用项,详细阅读全文,你也许会考虑以前的书写习惯是不是应该改一改了。
W3C定义了一组SVG的颜色列表,同样是 CSS 颜色模块所指定的颜色,他们是一些指向特定颜色的单词,例如常见的 white, black ,red 等等。下面是其中的一部分,鼠标移动到这些色块上面,将会呈现出它们所对应的名称。
事实上我个人更倾向于在某些时候使用颜色关键词来代码颜色编码,原因在于关键词更适合于人类阅读。在W3C Color Module详细地罗列了所有的颜色关键词,以及它们所分别对应的十六进位和十进位编码。他们有很好的浏览器兼容性,唯一值得注意的是,灰色在 IE8 之前的版本中使用的是 gray 表示,所以与灰色相关的颜色关键词在 IE6/7 稍有不同,它们在上面色块中以两个惊叹号标识出来。
currentColor 用来表示与当前元素的 color 属性相同的值,当然这个 color 属性可以使被继承下来的,下面是一个例子:
<div style=" color : darkred " > I'm dark red. <div style=" border-top:3px solid currentcolor; "> My border top is dark red, too. </div> </div>
使用 transparent 表示完全透明,在 CSS1 中,它只能在 background 属性中使用,CSS2中,添加到了 border 属性,而在 CSS3 中,transparent 能够在任何可以写颜色的属性中被使用。
以 RGB 标记颜色,即描述一个颜色中红色R,绿色G,蓝色B 的强度值。当使用这种模式表示颜色时,有以下2种方式可选:
1. 十六进制标记法
2.函数式标记法
当使用十六进制标记法的时候,可以采用简写的方式,同时该方法对大小写不敏感,下面的几个例子定义的都是完全相同的颜色。
element { color : #f03; color : #F03; color : #ff0033; color : #FF0033; }
在函数式标记法中,可以使用十进制整数或者百分比来表示,但是主要注意的是,两者不能混用,例如在用百分比表示一组颜色,那么请使用0%来代替0
element { color : rgb(255,0,51); color : rgb(255, 0, 51); color : rgb(100%, 0%, 20%); color : rgb(100%, 0, 20%); /* 错误的写法,整数和百分比方式不能混用*/ }
RGBa 是扩展了 alpha 通道,即扩展了透明度的 RGB 色彩模式,其中的 a 定义了该颜色的透明度。下面的代码标记了一个元素的 color 属性为透明度是 10 的红色。
element { color : rgba(255,0,0,0.1); }
HSL 是完全不同于 RGB 的色彩模式,H -> hue, S -> saturation, L -> lum 分别描述的一个颜色的色调,饱和度,明度,正因为如此,HSL 与 RGB 相比,它的优势在于,人们可以大致的猜测这个颜色的情况。H 代表了一个色环上的一个角度,这个色环从红色开始,最后再回到红色,所以 0 和 360 都代表了红色,而 S 和 L 都是用百分比来表示,这不难理解。
element { hsl(30, 100%,50%); }
与 RGBa 相同,HSLa 是在 HSL 模式上扩展了对透明度的支持。
element { hsla(240,100%,50%, 0.4); }
到目前为止,你也许发现了,上面所列举的一些内容在实施到某些浏览器中不会产生任何效果。事实上,关于色彩这一模块,在不同的浏览器中存在着较大的差异,特别是 IE 家族。下面的表格列举了不同的值在不同浏览器(核心)与不同版本的兼容情况。
Browser | #RRGGBB |
rgb |
hsl |
rgba |
hsla |
currentColor |
transparent |
---|---|---|---|---|---|---|---|
IE | 3.0 | 4.0 | --- | --- | --- | --- | [*] |
Gecko | 1.0 | 1.0 | 1.5 | 1.9 | 1.9 | 1.8 | 1.9 |
Opera | 3.5 | 3.5 | 9.5 | 10.0 | 10.0 | 9.5 | 10.0 |
WebKit | 85 | 85 | 525 | 525 | 525 | 528 | 525 |
[*] IE 7-8 的 transparent 属性只能被应用于 background 和 border 属性