线性渐变（linear-gradient）
View Code
现行渐变
首先看下示例
（1）垂直渐变
（2）垂直渐变
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结束颜色
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>线性渐变（linear-gradient）---http://www.cnblogs.com/kuikui</title> 5 <style type="text/css"> 6 .test1 7 { 8 width: 200px; 9 height: 80px; 10 text-align: center; 11 line-height: 80px; 12 margin-bottom: 10px; 13 color: White; 14 font-size: 20px; 15 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 16 background: -moz-linear-gradient(top, #FF0000, #F9F900); 17 background: -o-linear-gradient(top,#FF0000, #F9F900); 18 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900)); 19 } 20 .test2 21 { 22 width: 200px; 23 height: 80px; 24 text-align: center; 25 line-height: 80px; 26 margin-bottom: 10px; 27 color: White; 28 font-size: 20px; 29 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1'); 30 background: -moz-linear-gradient(left, #FF0000, #F9F900); 31 background: -o-linear-gradient(left,#FF0000, #F9F900); 32 background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900)); 33 } 34 </style> 35 </head> 36 <body> 37 <div class="test1"> 38 垂直渐变 39 </div> 40 <div class="test2"> 41 水平渐变 42 </div> 43 </body> 44 </html>
