用CSS3怎么實現(xiàn)背景漸變

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

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

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

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

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

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

CSS 規(guī)則如下。

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

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. }   

放射性漸變

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

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

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怎么實現(xiàn)背景漸變”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對用CSS3怎么實現(xiàn)背景漸變這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！