?
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前端開發(fā)參考手冊系列</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(十六進制數(shù)值表示法)</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>
點擊 "運行實例" 按鈕查看在線實例