CSS情况色渐变色写法适配ie6至ie9

2020-10-20 22:00 jianzhan
近期在新项目中,有许多地区都用到了线形渐变色,例如:表单递交按钮的情况,数据信息展现的题目情况这些,依照之前的做法是切 1px 照片随后 repeat-x。下面我将详细介绍怎样用 css 来进行该实际效果。

css3:linear-gradient

例如:黑色渐变色到白色,编码以下:

拷贝编码
编码以下:

.gradient{
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%);
}

ie 滤镜:filter

linear-gradient 在 ie9 下列是不适用的,因此针对 ie6 - ie8 大家可使用滤镜来处理,编码以下:

拷贝编码
编码以下:

.gradient{
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=0 );
}

因为 filter 是 ie 的独享特性,因此大家必须对于 ie9 独立解决滤镜实际效果,编码以下:

拷贝编码
编码以下:

:root {filter:none;}

总结:

综上所述,线形渐变色的适配写法以下:

拷贝编码
编码以下:

.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;}

PS:
在具体的新项目中,常常会碰到圆角和渐变色的组成,假如应用上面的写法,那末在 ie9 下会有 bug(在 ie9 下情况色不可以彻底切完),处理方式是SVG