CSS3中顏色線性漸變的實現方法

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

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

CSS Code復制內容到剪貼板

1. .test{   

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

3. }  

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

最簡單的線性漸變效果

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

CSS Code復制內容到剪貼板

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);                             /*標準語法要放在最后 */  

6. }  

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

CSS Code復制內容到剪貼板

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);             /*標準語法要放在最后 */  

6. }  

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

指定起點

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

CSS Code復制內容到剪貼板

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);                       /*標準語法 */  

6. }  

效果如圖所示。

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

彩虹色

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

CSS Code復制內容到剪貼板

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中顏色線性漸變的實現方法”的內容了，經過本文的學習后，相信大家對CSS3中顏色線性漸變的實現方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！