CSS背景色渐变写法兼容ie6至ie9
最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 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
相关文章:1. appdata文件夹在哪里详细介绍2. 小米笔记本Pro 2022将于7月4日发布:大师级屏幕3. 小米Redmi Book Pro 14/15 2022锐龙版笔记本开售4. 戴尔XPS 8950旗舰设计台式机上架 首次搭载水冷散热5. 华硕Zenbook Pro 16X OLED参数亮点介绍 可选RTX30606. 华硕无畏Pro15 2022锐龙版/无畏Pro14锐龙版轻薄本预售7. 英特尔30.0.100.9955显卡驱动修复Xe显卡游戏时的异常8. AMD发布锐龙7000系列台式机处理器:基于“Zen 4”架构9. Mac注意事项模板210. 华硕TUF Gaming系列RTX 3090Ti 规格参数曝光