DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS兼容各浏覽器的漸變代碼 包括水平和垂直漸變
CSS兼容各浏覽器的漸變代碼 包括水平和垂直漸變
編輯:CSS詳解     
  •  CSS兼容各浏覽器的漸變代碼,包括水平和垂直漸變,兼容火狐、Chrome、Opera等浏覽器的代碼也有,從此可以不用圖片了,極大的方便了CSS愛好者。

    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 02 <Html XMLns="http://www.w3.org/1999/xHtml"> 03 <head> 04 <title>CSS線性漸變</title> 05 <style type="text/CSS"> 06 .test1{ 07 width: 200px; 08 height: 80px; 09 text-align: center; 10 line-height: 80px; 11 margin-bottom: 10px; 12 color: White; 13 font-size: 20px; 14 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradIEntType='0'); 15 background: -moz-linear-gradIEnt(top, #FF0000, #F9F900); 16 background: -o-linear-gradIEnt(top,#FF0000, #F9F900); 17 background: -webkit-gradIEnt(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 18 } 19 .test2{ 20 width: 200px; 21 height: 80px; 22 text-align: center; 23 line-height: 80px; 24 margin-bottom: 10px; 25 color: White; 26 font-size: 20px; 27 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradIEntType='1'); 28 background: -moz-linear-gradIEnt(left, #FF0000, #F9F900); 29 background: -o-linear-gradIEnt(left,#FF0000, #F9F900); 30 background: -webkit-gradIEnt(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)); 31 } 32 </style> 33 </head> 34 <body> 35 <div class="test1">CSS垂直漸變</div> 36 <div class="test2">CSS水平漸變</div> 37 </body> 38 </Html>

    同時也會大家收集了一些在其它浏覽器下的CSS漸變代碼,供需要者使用。先來看IE下的CSS漸變代碼:

    1 filter: progid:DXImageTransform.Microsoft.GradIEnt(startColorStr='#FF0000',endColorStr='#F9F900',gradIEntType='0');

    參數:startColorStr起始顏色 endColorStr結束顏色 gradIEntType為0時代表垂直,為1時代表水平。

    Firefox下的CSS漸變代碼:這個更簡單:

    1 background: -moz-linear-gradIEnt(top#FF0000#F9F900);

    參數:top、bottom垂直,left、right水平 例如:top時從頂部由#FF0000到#F9F900漸變,bottom時從底部由#FF0000到#F9F900漸變。

    Opera浏覽器中的CSS漸變,代碼同樣挺簡潔:

    1 background: -o-linear-gradIEnt(top,#FF0000#F9F900);

    參數:top、bottom垂直,left、right水平 例如:top時從頂部由#FF0000到#F9F900漸變,bottom時從底部由#FF0000到#F9F900漸變。

    webkit內核的浏覽器CSS漸變代碼,如Chrome、Safari等:

    1 background: -webkit-gradIEnt(linear, 0% 0%0% 100%, from(#FF0000), to(#F9F900));

    參數:linear線性, x1 x2, x3 x4 x1與x3相同時垂直,x2與x4相同時水平 from起始顏色 to結束顏色。

    好了,這麼多的漸變代碼,自己親自嘗試下吧,你可以試著改變他們的顏色,變成你自己喜歡的漸變風格。
     

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved