CSS3中顏色線性漸變的實(shí)現(xiàn)方法

這篇文章主要講解了“CSS3中顏色線性漸變的實(shí)現(xiàn)方法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS3中顏色線性漸變的實(shí)現(xiàn)方法”吧！

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

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

1. .test{   

2.   background:linear-gradient(red, blue);   

3. }  

上述代碼的效果如圖所示。

最簡單的線性漸變效果

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

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

1. .test {   

2.   background:-webkit-linear-gradient(red, blue);             /*webkit核心瀏覽器兼容代碼*/  

3.   background:-o-linear-gradient(red, blue);                       /*Opera瀏覽器兼容代碼*/  

4.   background:-moz-linear-gradient(red, blue);                 /*Firefox 瀏覽器兼容代碼*/  

5.   background:linear-gradient(red, blue);                             /*標(biāo)準(zhǔn)語法要放在最后 */  

6. }  

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

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

1. .test {   

2.   background:-webkit-linear-gradient(left, red, blue);      /*webkit核心瀏覽器兼容代碼*/  

3.   background:-o-linear-gradient(left, red, blue);                /*Opera瀏覽器兼容代碼*/  

4.   background:-moz-linear-gradient(left, red, blue);                   /*Firefox 瀏覽器兼容代碼*/  

5.   background:linear-gradient(to rightright, red, blue);             /*標(biāo)準(zhǔn)語法要放在最后 */  

6. }  

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

指定起點(diǎn)

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

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

1. .test {   

2.   background:-webkit-linear-gradient(45deg, red, blue);          /*webkit核心瀏覽器兼容代碼*/  

3.   background:-o-linear-gradient(45deg, red, blue);                            /*Opera瀏覽器兼容代碼*/  

4.   background:-moz-linear-gradient(45deg, red, blue);             /*Firefox 瀏覽器兼容代碼*/  

5.   background:linear-gradient(45deg, red, blue);                       /*標(biāo)準(zhǔn)語法 */  

6. }  

效果如圖所示。

圖5.11 指定漸變方向為45°
線性漸變不止支持兩種顏色的漸變，還可以添加任意種顏色，比如可以使用線性漸變構(gòu)造一個彩虹效果，如圖5.12所示。

彩虹色

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

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

1. .test {   

2.   background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   

3.   background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   

4.   background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);   

5.   background:linear-gradient(to rightright, red,orange,yellow,green,blue,indigo,violet);   

6. }  

感謝各位的閱讀，以上就是“CSS3中顏色線性漸變的實(shí)現(xiàn)方法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS3中顏色線性漸變的實(shí)現(xiàn)方法這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！