CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

最近越来越喜欢用css写渐变背景效果,在做pc页面时,遇到了不兼容IE浏览器,以下算读书笔记。

效果都是同样的效果,就是利用background作一个垂直渐变,起始颜色#b8c4cb,结束颜色#f6f6f8。

IE浏览器下渐变背景的使用需要使用IE的渐变滤镜

如下代码:

FILTER:?progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);?

上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。 其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩” 代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。background:?-ms-linear-gradient(top,?#fff,??#0000ff);????????

Firefox浏览器下的渐变背景 background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);

chrome/Safari浏览器下的渐变背景实现 background:-webkit-gradient(linear,?0%?0%,?0%?100%,from(#b8c4cb),?to(#f6f6f8)); background:?-webkit-gradient(linear,?0%?0%,?0%?100%,?from(#fff),?to(#0000ff));?????? background:?-webkit-linear-gradient(top,?#fff,?#0000ff);???

Opera浏览器下的渐变背景实现 background:?-o-linear-gradient(top,?#fff,?#0000ff);??上述的语法:

1 2

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

理工男图解零维到十维空间,烧脑已过度,受不了啦!

让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

32130
来自专栏怀英的自我修炼

考研英语-1-导学

英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

11710
来自专栏FSociety

SQL中GROUP BY用法示例

GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

5.1K20
来自专栏钱塘大数据

中国互联网协会发布:《2018中国互联网发展报告》

在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

13550
来自专栏haifeiWu与他朋友们的专栏

复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

28440
来自专栏腾讯高校合作

【倒计时7天】2018教育部-腾讯公司产学合作协同育人项目申请即将截止!

15620
来自专栏腾讯社交用户体验设计

ISUX Xcube智能一键生成H5

51220
来自专栏前端桃园

知识体系解决迷茫的你

最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

20740
来自专栏Ken的杂谈

【系统设置】CentOS 修改机器名

17830
来自专栏微信公众号:小白课代表

不只是软件,在线也可以免费下载百度文库了。

不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

44330

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励