css背景色渐变兼容写法_html/css

来源：懂视网责编：小采时间：2020-11-27 16:06:13

css背景色渐变兼容写法_html/css

css背景色渐变兼容写法_html/css_WEB-ITnose:css3：linear-gradient 比如：黑色渐变到白色，代码如下： .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bo

推荐度：

点击下载本文 文档为doc格式

导读css背景色渐变兼容写法_html/css_WEB-ITnose:css3：linear-gradient 比如：黑色渐变到白色，代码如下： .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bo

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

说明：linear-gradient 具体用法点此进入。

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，具体点此查看。

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

css背景色渐变兼容写法_html/css

推荐度：

点击下载本文 文档为doc格式

标签：颜色背景色 cs

热门焦点

css背景色渐变兼容写法_html/css

css背景色渐变兼容写法_html/css

css背景色渐变兼容写法_html/css

最新推荐

猜你喜欢

热门推荐