本文所分享的知识点是【兼容IE与firefox的css 线性渐变（linear-gradient）】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
兼容IE与firefox的css 线性渐变（linear-gradient）
<!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>
关于兼容IE与firefox的css 线性渐变（linear-gradient）的相关讨论如下：
相关问题：css3 linear-gradient线性渐变如何使用才有效果?求...
答：linear-gradient这个CSS3的线性渐变属性，目前浏览器还没同一，需要加前缀，例如： Document#div1{ width: 200px; height: 100px; background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/ background:-webkit-gradient(linear,0 50%,100%... >>详细
相关问题：请问各位高手一个关于利用css使ie实现渐变效果的问题
答：CSS3渐变 渐变.html 文件代码清单如下： 渐变 /* 径向渐变 */ /* 线型渐变 */ gradient.css 文件代码清单如下： div {width: 500px;height: 300px;}#radial {background: -moz-radial-gradient(circle, rgb(255, 0, 0),rgb(0, 0, 255)); /* Fire... >>详细
相关问题：为什么火狐不支持CSS3的颜色渐变
答：.skin1{background: -moz-radial-gradient(30px 30px, circle farthest-corner, #58ff00 0%, rgba(222, 255, 0, 0) 30%);} FF 14.0.1 测试成功 >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-