语法:

选择器{
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. java命令--jmap命令使用(查找内存泄漏对象)

    转自:https://www.cnblogs.com/kongzhongqijing/articles/3621163.html jdk安装后会自带一些小工具,jmap命令(Java Memory M ...

  2. HBase1.2.6 预分区后,数据不进入预定分区的一个 bug

    rowkey 如下: 19000015115042900001511504390000151150449000015115045900001511504690000151150479000015115 ...

  3. linux上使用wget下载文件

    首次安装的centos操作系统是没有安装wget的,所以首先需要先安装wget,然后才能使用wget下载文件. 1.第一步,保证centos能正常连网.使用命令  :yum -y install wg ...

  4. java中数组以及集合

    java中数组: 数组在Java里是一种特殊类型,有别于普通的“类的实例”的对象.但实际数组也是一种对象类型,int[]a = new int[5]  a是在java栈中分配的引用变量,类型是int[ ...

  5. zookeeper和淘宝dubbo的关系

    Dubbo建议使用Zookeeper作为服务的注册中心. 1.   Zookeeper的作用:         zookeeper用来注册服务和进行负载均衡,哪一个服务由哪一个机器来提供必需让调用者知 ...

  6. [NOI2014]起床困难综合症(二进制+贪心)

    题目 [NOI2014]起床困难综合症 做法 先用全\(0\)和全\(1\)去运行一下,再在满足\(m\)的限制下,贪心地从高位到低位选择即可

  7. 安卓Android第三方登录-QQ登录

    要实现QQ第三方登录,其实只需要一个封装类:QQLoginManager 几乎 三行代码 就实现QQ登录功能 这里先给出Github开源项目地址,项目下有详细的使用说明   下面就开始详细说一说怎么实 ...

  8. RocEDU.阅读.写作《霍乱时期的爱情》书摘(一)

    不可避免,苦杏仁的香味总是让他想起爱情受阻后的命运. 一切都显得凄凉无助,可那一间间肮脏的小酒馆里却传来震耳欲聋的鼓乐声,那是穷人的狂欢,既无涉上帝,也无涉圣神降临节的诫命. 他们经常谈起它,一同承受 ...

  9. 输入n,求1~n累加

    最开始可能会使用for循环来计算,现在直接使用等差数据计算和公式:s=(a0+n)*n/2 long sum(int n) { long ret=0: ret = (1+n)* n /2: retur ...

  10. DOS/BAT批处理if exist else 语句的几种用法

    在DOS批处理命令中常常会通过if语句来进行判断来执行下面的命令, 那么批处理if语句怎么用呢,下面学无忧小编就来说说有关批处理if以及if exist else语句的相关内容.一.批处理if书写格式 ...