CSS3渐变背景代码(兼容主流浏览器)
  • 分类:经验分享
  • 发表:2015-12-19
  • 围观(3,223)
  • 评论(0)

代码原文:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
html,boyd{padding:0px; margin:0px; height:100%;}
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#173f58,endColorStr=#2ca7a9); /*IE*/
background:-moz-linear-gradient(top,#173f58,#2ca7a9);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#173f58), to(#2ca7a9));/*谷歌*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0,#173f58),color-stop(1, #2ca7a9));/* Safari & Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#173f58', endColorstr='#2ca7a9'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#173f58', endColorstr='#2ca7a9')"; /* IE8 */
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>

 

对于IE6,其实也可能兼容,制作一个图片,使用_background:url();即可。

 

上述代码需要声明DOCTYPE的。

Top