第3章 顏色相關(guān)
顏色之RGBA
RGB是一種色彩標(biāo)準(zhǔn),是由紅(R)、綠(G)、藍(lán)(B)的變化以及相互疊加來得到各式各樣的顏色钳榨。RGBA是在RGB的基礎(chǔ)上增加了控制alpha透明度的參數(shù)。
語法:
color:rgba(R,G,B,A)
以上R纽门、G薛耻、B三個參數(shù),正整數(shù)值的取值范圍為:0 - 255赏陵。百分?jǐn)?shù)值的取值范圍為:0.0% - 100.0%饼齿。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分?jǐn)?shù)值蝙搔。A為透明度參數(shù)缕溉,取值在0~1之間,不可為負(fù)值吃型。
background-color:rgba(100,120,60,0.5);
漸變色彩
CSS3 Gradient 分為線性漸變(linear)和徑向漸變(radial)证鸥。由于不同的渲染引擎實現(xiàn)漸變的語法不同,這里我們只針對線性漸變的 W3C 標(biāo)準(zhǔn)語法來分析其用法勤晚,其余大家可以查閱相關(guān)資料枉层。W3C 語法已經(jīng)得到了 IE10+、Firefox19.0+运翼、Chrome26.0+ 和Opera12.1+等瀏覽器的支持返干。
linear-gradient(to bottom, #fff, #999);
參數(shù):
第一個參數(shù):指定漸變方向,可以用“角度”的關(guān)鍵詞或“英文”來表示:
角度 | 用英文表示 | 作用 |
---|---|---|
0deg | to top | 從下向上 |
90deg | to right | 從左向右 |
180deg | to bottom | 從上向下 |
270deg | to left | 從右向左 |
to top left | 右下角到左上角 | |
to top right | 左下角到右上角 |
第一個參數(shù)省略時血淌,默認(rèn)為“180deg”矩欠,等同于“to bottom”。
第二個和第三個參數(shù)悠夯,表示顏色的起始點(diǎn)和結(jié)束點(diǎn)癌淮,可以有多個顏色值。
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);