CSS3中顏色線性漸變實(shí)戰(zhàn)

segmentfault 發(fā)布時(shí)間：2015-07-18 17:34:09 作者：吳曉麗分享

這篇文章主要介紹了CSS3中顏色線性漸變實(shí)戰(zhàn),示例中展示了代碼設(shè)置不同漸變方向的效果,需要的朋友可以參考下

線性漸變可以設(shè)置3個(gè)參數(shù)值：方向、起始顏色、結(jié)束顏色。最簡(jiǎn)單的模式只需要定義起始顏色和結(jié)束顏色，起點(diǎn)、終點(diǎn)和方向默認(rèn)自元素的頂部到底部。下面舉例說(shuō)明：

CSS Code復(fù)制內(nèi)容到剪貼板

.test{
background:linear-gradient(red, blue);
}

上述代碼的效果如圖所示。
2015718173816622.png (600×215)

最簡(jiǎn)單的線性漸變效果

如果要在一些舊版本的瀏覽器（除IE）下可以正常顯示如圖5.9的效果，則需要添加兼容代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

.test {
background:-webkit-linear-gradient(red, blue); /*webkit核心瀏覽器兼容代碼*/
background:-o-linear-gradient(red, blue); /*Opera瀏覽器兼容代碼*/
background:-moz-linear-gradient(red, blue); /*Firefox 瀏覽器兼容代碼*/
background:linear-gradient(red, blue); /*標(biāo)準(zhǔn)語(yǔ)法要放在最后 */
}

線性漸變可以指定漸變的方向，如下例：

CSS Code復(fù)制內(nèi)容到剪貼板

.test {
background:-webkit-linear-gradient(left, red, blue); /*webkit核心瀏覽器兼容代碼*/
background:-o-linear-gradient(left, red, blue); /*Opera瀏覽器兼容代碼*/
background:-moz-linear-gradient(left, red, blue); /*Firefox 瀏覽器兼容代碼*/
background:linear-gradient(to rightright, red, blue); /*標(biāo)準(zhǔn)語(yǔ)法要放在最后 */
}

上述代碼的效果如圖所示，設(shè)置了left/to right參數(shù)后，漸變方向從自上而下變成了自左向右。
2015718173846445.png (600×211)

指定起點(diǎn)

注意：標(biāo)準(zhǔn)寫法的漸變方向格式如上例中的“to right”，在火狐和Opera瀏覽器下則使用right，而對(duì)于webkit核心瀏覽器則使用起點(diǎn)位置left來(lái)表示。
漸變方向還可以使用角度來(lái)表示，0deg、90deg、180deg和270deg分別對(duì)應(yīng)to top、to right、to bottom和to left，例如：

CSS Code復(fù)制內(nèi)容到剪貼板

.test {
background:-webkit-linear-gradient(45deg, red, blue); /*webkit核心瀏覽器兼容代碼*/
background:-o-linear-gradient(45deg, red, blue); /*Opera瀏覽器兼容代碼*/
background:-moz-linear-gradient(45deg, red, blue); /*Firefox 瀏覽器兼容代碼*/
background:linear-gradient(45deg, red, blue); /*標(biāo)準(zhǔn)語(yǔ)法 */
}

效果如圖所示。
2015718173904293.png (600×214)

圖5.11 指定漸變方向?yàn)?5°
線性漸變不止支持兩種顏色的漸變，還可以添加任意種顏色，比如可以使用線性漸變構(gòu)造一個(gè)彩虹效果，如圖5.12所示。
2015718173956568.png (600×208)

彩虹色

上圖所示的彩虹色效果代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

.test {
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
background:linear-gradient(to rightright, red,orange,yellow,green,blue,indigo,violet);
}