相容IE與firefox的css 線性漸層(linear-gradient)

來源:互聯網
上載者:User
IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');參數:startColorStr起始顏色 endColorStr結束顏色 gradientType為0時代表垂直,為1時代表水平 Firefox background: -moz-linear-gradient(top, #FF0000, #F9F900); 參數:top、bottom垂直,left、right水平 例如:top時從頂部由#FF0000到#F9F900漸層,bottom時從底部由#FF0000到#F9F900漸層 Opera background: -o-linear-gradient(top,#FF0000, #F9F900); 參數:top、bottom垂直,left、right水平 例如:top時從頂部由#FF0000到#F9F900漸層,bottom時從底部由#FF0000到#F9F900漸層 webkit,如Chrome、Safari等 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 參數:linear線性, x1 x2, x3 x4 x1與x3相同時垂直,x2與x4相同時水平 from起始顏色 to結束顏色<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>線性漸層(linear-gradient)---http://www.jb51.net</title> <style type="text/css"> .test1 { width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10px; color: White; font-size: 20px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); background: -moz-linear-gradient(top, #FF0000, #F9F900); background: -o-linear-gradient(top,#FF0000, #F9F900); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); } .test2 { width: 200px; height: 80px; text-align: center; line-height: 80px; margin-bottom: 10px; color: White; font-size: 20px; filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1'); background: -moz-linear-gradient(left, #FF0000, #F9F900); background: -o-linear-gradient(left,#FF0000, #F9F900); background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)); } </style> </head> <body> <div class="test1"> 垂直漸層 </div> <div class="test2"> 水平漸層 </div> </body> </html> 
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.