CSS3兼容各浏览器的线型渐变方法：
<!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> <meta charset="utf-8"> <title>线性渐变（linear-gradient）</title> <style type="text/css"> .gradient{ background: #000000; background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 ); } :root .gradient{filter:none;} </style> </head> <body> <div class="gradient"> 垂直渐变 </div> </body> </html>
如下图所示：
兼容IE哟~~