参考文献:http://caibaojian.com/css3-background-gradient.html
https://www.cnblogs.com/xzzzys/p/7495725.html
目标:
一开始用 background: linear-gradient(to right, #000,#fff) :
谷歌、火狐、欧朋(都是新版)可以兼容
ie9 不可以兼容
所以为了ie或其他较低版本浏览器兼容:
.gradient{
width: 973px;
height: 100%;
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* 兼容Safari4-5, chrome1-9 */
background: -moz-linear-gradient(right, #000000 0%, #ffffff 100%); /* firefox */
background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* chrome */
background: -o-linear-gradient(right, #000000 0%,#ffffff 100%); /* opera */
background: -ms-linear-gradient(right, #000000 0%,#ffffff 100%); /* ie */
background: linear-gradient(to right, #000000,#ffffff); /* firefox */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1)"; /* 兼容IE8~IE9 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* 兼容IE5~IE9 */
}
注意:
1、filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); 中 GradientType=1 代表水平 , GradientType=0 代表从上往下(默认从上往下)
还要特别值得注意的是 startColorstr='#000000' 中的 16进制颜色 不能简写 为 #000 ,不然也不会识别达到效果
2、background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); 中 left开始位置,其他都都是结束位置
这样就可以兼容了。