语法:

选择器{
background:linear-gradien(线性渐变的方向,起点颜色,终点颜色);
}

第一个参数:[可选参数,默认从上到下] 线性渐变的方向:top,bottom,left,right,top left;

第二个和第三个参数:起点颜色和终点颜色,其实中间可以插入更多的颜色,以实现多色渐变效果;支持直接写颜色,或16进制颜色

兼容性问题:

支持chrome和火狐,其他浏览器尚未测试,部分支持IE10,

为了支持chrome和火狐,要分别写上-webkit-,-moz-

比如:

div{
background:-webkit-linear-gradient(top,red,blue);/*谷歌*/
background:-moz-linear-gradient(top,red,blue); /*火狐*/
background:linear-gradient(top,red,blue); /*ie10*/ }

之所以说部分支持IE10,是因为我测试时,第一个参数,写了多种之后,发现IE10只支持少数的几种方向。

ie6~9的背景色渐变:

其实是用了filter滤镜来做:

.div{
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,
startColorstr=pink,
endColorstr=black
);
/*IE7*8*9有效*/

其中:GradientType=1代表纵向,0代表横向

CSS3径向渐变linear-gradient的更多相关文章

  1. CSS3技巧:利用css3径向渐变做一张优惠券(转)

    在很多购物网站上都能看到优惠券,代金券,什么什么的券,但基本都是图片直接放上去,那么你有没有想过css来做一个呢,反正我是这样想过.那么你怎么做呢,切图做背景平铺边缘,嗯,有这样想过,如今css3技术 ...

  2. css3径向渐变详解-遁地龙卷风

    (-1)写在前面 我用的是chrome49,如果你用的不是.可以尝试换下浏览器前缀.IE在这方面的实现又特例独行了.不想提及-,这篇是为后续做准备. (0)快速使用 background-image: ...

  3. CSS3径向渐变----大鱼吃小鱼之孤单的大鱼

    最近迷恋上了钓鱼,可是总钓不到大鱼,所以就画条大鱼来安慰一下我这柔弱的心灵. 先上图: 上面这个就是今晚上我要跟大家分享的小DEMO,我给他起名字就“大鱼吃小鱼之孤单的大鱼”. 转入正题,这条大鱼分为 ...

  4. css3径向渐变

    #grad2 { height: 440px; width: 440px; border-radius: %; background: -webkit-radial-gradient(closest- ...

  5. CSS3径向渐变实现优惠券波浪造型

    效果看下图: 左右的波浪边框用CSS搞定这个效果.利用CSS radial-gradient() 函数 CSS 语法: background: radial-gradient(shape size a ...

  6. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  7. Css3渐变(Gradients)-径向渐变

    CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...

  8. CSS3之径向渐变

        设置最终形状参数: ellipse circle 设置长半轴和短半轴 设置椭圆对称中心 设置色标 输出代码: radial-gradient(circle closest-side at ce ...

  9. CSS3背景渐变。。。

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 G ...

随机推荐

  1. 查看ubuntu 各系统的内核版本

    1.查看ubuntu版本号:   cat  /etc/issue 返回结果: Ubuntu 16.04.2 LTS \n \l   2.查看内核版本号:   cat /proc/version 返回结 ...

  2. snapshot与release

    总结自:https://www.jianshu.com/p/084fd2408d9a 这两个概念是用于描述jar包,jar包提供给其他系统作为依赖. 1. snapshot版本代表不稳定.尚处于开发中 ...

  3. 20145313张雪纯 《Java程序设计》第4周学习总结

    20145313张雪纯 <Java程序设计>第4周学习总结 教材学习内容总结 6.1何谓继承 程序代码重复时,可以把相同的程序代码提升为父类.继承除了可避免类之间重复的行为定义以外,还有i ...

  4. zabbix_server.log大量提示cannot send list of active checks to "IP": host [HostName] not found

    zabbix server 日志大量提示上图信息 原因是 zabbix_agent.conf配置文件中配置的HostName与zabbix的web界面配置的不同导致的 zabbix_agent.con ...

  5. 1970年1月1日(00:00:00 GMT)Unix 时间戳(Unix Timestamp)

    转载自(http://jm.ncxyol.com/post-88.html) 今天在看Python   API时,看到time模块: The epoch is the point where the ...

  6. 初入spring boot(七 )Spring Data JPA

    Spring Data JPA通过提供基于JPA的Repository极大地减少JPA作为数据访问方案的代码量. 1.定义数据访问层 使用Spring Data JPA建立数据访问层十分简单,只需定义 ...

  7. Nodejs Q promise设计思路

    Nodejs Q promise库 前言 Q库为nodejs提供了一个基于promise的编程方式,从此避免了一层又一层的callback调用.不过Q的灵活性也给我造成了很大困扰,我可以用promis ...

  8. POJ - 3255 次短路径

    题意:给你无向带权图,求次短路径 题解:加一个次短路的数组,用于距记录源点到此点的次短路长度,注意初始化是源点到自己的次短路是极大值 接着再使用dijkstra算法,它是每次选用现在连上(记录了)的点 ...

  9. Dijkstra FORMCM

    Dijkstra 算法 date: 2018/2/2 author:pprp theme:Dijstra 简述 辅助空间 vis数组:记录是否已经判断过 dis数组:记录指定原点到其他点的距离 mp二 ...

  10. Gym - 100712H Bridges(边—双连通分量)

    https://vjudge.net/problem/Gym-100712H 题意: 给出一个图,求添加一条边后最少的桥数量. 思路: 参考了ZSQ大神的题解http://blog.csdn.net/ ...