最近在项目中，有很多地方都用到了线性渐变，比如：表单提交按钮的背景，数据展示的标题背景等等，按照以前的做法是切 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%);}
登录后复制
说明：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;}
登录后复制
以上就是css如何让背景色渐变兼容的写法详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3122709.html
