博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css3 线性渐变和径向渐变
阅读量:7224 次
发布时间:2019-06-29

本文共 1109 字,大约阅读时间需要 3 分钟。

线性渐变:ie6以下不兼容

径向渐变:只支持firefox、Chrome和Safari

   
Background Color

注意:background-image 可以写 background

我自己在网页中写的径向渐变兼容代码 :firefox、chrome、IE10、IE10+、safari(background-image老式写法)兼容

background: rgb(98, 37, 140);background:-webkit-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));background-image: -webkit-gradient(radial,50% 0%,0,50% 55%,90,from(rgb(160, 114, 193)),to(rgb(98, 37, 140)));/* Safari 4-5, Chrome 1-9 */background:radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));background:-moz-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));background:-ms-radial-gradient(circle at top, rgb(160, 114, 193),rgb(98, 37, 140));

线性渐变兼容代码 :firefox、chrome、IE10、IE10+、safari兼容

background: rgb(247, 100, 14);background:-webkit-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));/* safari,chrome*/background:linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));background:-moz-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));background:-ms-linear-gradient(top, rgb(251, 121, 46) ,rgb(247, 100, 14));

 附图

 径向

 线性

 

转载地址:http://vgzfm.baihongyu.com/

你可能感兴趣的文章
AngularJS的Hello World
查看>>
日志池
查看>>
电子病历,到底是用BS还是CS
查看>>
Visual Studio (VSIX,项目模板 )制作
查看>>
两个人的荒岛
查看>>
机器学习经典书籍
查看>>
[nginx] nginx安装
查看>>
[转].NET 绘制 EAN13 (商品条码)
查看>>
【转】越狱的 iPhone、iPad 通过网站实现一键安装 ipa 格式的 APP 应用
查看>>
开发者的利器:Docker 理解与使用
查看>>
mybatis调用视图和存储过程
查看>>
Nested loops、Hash join、Sort merge join(三种连接类型原理、使用要点)
查看>>
RT-Thread的线程(任务)处理 rt_thread_create/rt_thread_init区别
查看>>
为什么需要单元测试
查看>>
[原]shell中的三个零碎知识
查看>>
piix4_smbus 0000:00:07.0: SMBus base address uninitialized - upgrade BIOS or use force_addr=0xaddr
查看>>
操作MSSQL服务还有测试是否连接
查看>>
vim命令拾遗[zz]
查看>>
简单PHP留言板之七 —— 附加上css样式表
查看>>
数据库开发篇(一)——转换日期类型
查看>>