CSS背景色渐变写法兼容ie6至ie9

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

最近在项目中，有很多地方都用到了线性渐变，比如表单提交按钮的背景，数据展示的标题背景等等，按照以前的做法是切 1px 图片然后 repeat-x。狼蚁网站SEO优化我将介绍如何用 css 来完成该效果。

css3linear-gradient

比如黑色渐变到白色，代码如下

复制代码

代码如下:

.gradient{
background: -moz-linear-gradient(, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left , left bottom, color-s(0%,#000000), color-s(100%,#ffffff));
background: -webkit-linear-gradient(, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(, #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(, #000000 0%, #ffffff 100%);
background: -webkit-gradient(linear, left , left bottom, color-s(0%,#000000), color-s(100%,#ffffff));
background: -webkit-linear-gradient(, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(, #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

上一篇：从可维护性角度考虑css的!important规则的可用性下一篇：IE中对于stylesheet、样式规则的个数限制

CSS背景色渐变写法兼容ie6至ie9

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

CSS背景色渐变写法兼容ie6至ie9

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设