用CSS3怎么實現背景漸變

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

CSS3 之前，必須依賴 Adobe Photoshop 等圖形處理軟件來制作漸變圖，再以背景圖片方式添加給元素。 而現在， 使用 CSS就可以創造出各種漸變效果了。漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性

CSS Code復制內容到剪貼板

1. <div class='gradient1'></div>    

2. <div class='gradient2'></div>    

3. <div class='gradient3'></div>   

CSS 規則如下。

CSS Code復制內容到剪貼板

1. /*為元素盒子添加樣式*/    

2. div {    

3.  height:150px;    

4.  width:200px;    

5.  border:1px solid #ccc;    

6.  float:left;    

7.  margin:16px;    

8. }    

9.   

10. /*例 1：默認為從上到下*/    

11. .gradient1 {    

12.  background:linear-gradient(#e86a43, #fff);    

13. }    

14.   

15. /*例 2：從左到右*/    

16. .gradient2 {    

17.  background:linear-gradient(left, #64d1dd, #fff);    

18. }    

19.   

20. /*例 3：左上到右下*/    

21. .gradient3 {    

22.  background:linear-gradient(-45deg, #e86a43, #fff);    

23. }   

放射性漸變

在創建放射性漸變時，可以使用參數指定形狀、位置、尺寸、顏色和不透明度

CSS Code復制內容到剪貼板

1. .gradient1 {    

2.  background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);    

3. }    

4. .gradient2 {    

5.  background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);    

6. }    

7. .gradient3 {    

8.  background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,    

9. #4947ba);    

10. }   

感謝各位的閱讀，以上就是“用CSS3怎么實現背景漸變”的內容了，經過本文的學習后，相信大家對用CSS3怎么實現背景漸變這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！