css 颜色渐变 兼容性

一开始用 background: linear-gradient(to right, #000,#fff)  :

谷歌、360极速模式、火狐、欧朋（都是新版）可以兼容；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开始位置，其他都都是结束位置，这样就可以兼容了。

原文地址：https://www.cnblogs.com/xingyue525/archive/2019/04/30/10795439.html

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3163