©
This document uses PHP Chinese website manual Release
color:<color>
默认值:由user agent决定
适用于:所有元素
继承性:有
动画性:是
计算值:指定值
<color>:指定颜色。
可以使用Color Name(颜色名称), HEX, RGB, RGBA, HSL, HSLA, transparent来指定color。
注意,用颜色名称指定color可能不被一些浏览器接受。
color属性值被间接用来提供一个中间值 currentColor 以供其他接受颜色值的属性使用。
示例:
如上代码,没有定义边框的颜色,但定义了color的颜色为red,那么这时red将会作为一个间接值 currentColor 提供给边框颜色属性,所以最终边框色也为red。
对应的脚本特性为color。
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 15.0+ | 3.2+ | 2.1+ | 18.0+ |
RGBA, HSL, HSLA, transparent | 6.0-8.0 | |||||||
9.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>color_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .colorname p{color:green;} .hex p{color:#ff0000;} .rgb p{color:rgb(0,0,0);} .rgba p{color:rgba(0,0,0,.5);} .hsl p{color:hsl(240,50%,50%);} .hsla p{color:hsla(240,50%,50%,.5);} .transparent p{color:transparent;} </style> </head> <body> <ul class="test"> <li class="colorname"> <strong>Color Name(用颜色名称表示法)</strong> <p>看看我的颜色 {color:green;}</p> </li> <li class="hex"> <strong>HEX(十六进制数值表示法)</strong> <p>看看我的颜色 {color:#ff0000;}</p> </li> <li class="rgb"> <strong>RGB</strong> <p>看看我的颜色 {color:rgb(0,0,0);}</p> </li> <li class="rgba"> <strong>RGBA</strong> - IE8及以下浏览器不支持这种写法 <p>看看我的颜色 {color:rgba(0,0,0,.5);}</p> </li> <li class="hsl"> <strong>HSL</strong> - IE8及以下浏览器不支持这种写法 <p>看看我的颜色 {color:hsl(240,50%,50%);}</p> </li> <li class="hsla"> <strong>HSLA</strong> - IE8及以下浏览器不支持这种写法 <p>看看我的颜色 {color:hsla(240,50%,50%,.5);}</p> </li> <li class="transparent"> <strong>transparent</strong> - IE8及以下浏览器将文本颜色设置为transparent,文本将显示为黑色 <p>看看我的颜色 {color:transparent;}</p> </li> </ul> </body> </html>
点击 "运行实例" 按钮查看在线实例