语法:

选择器{
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. MySQL-5.7 备份与恢复

    一.备份分类 按介质分类: 物理备份 指通过拷贝数据库文件方式完成备份,适用于数据库很大,数据重要且需要快速恢复的数据库. 逻辑备份 指通过备份数据库的逻辑结构和数据内容的方式完成备份,适用于数据库不 ...

  2. JAVA面试题整理(1)-基础

    1.List 和 Set 的区别  共同点:它们都是Collection的子接口 区别: List:这个接口能够精准的记录每一个元素的插入位置(换句话说就是这个接口内容所有元素是按照顺序去保存的),使 ...

  3. 20145324 Java实验五

    1.运行教材上TCP代码,结对进行,一人服务器,一人客户端: 2.利用加解密代码包,编译运行代码,一人加密,一人解密: 3.集成代码,一人加密后通过TCP发送: 注:加密使用AES或者DES/AES或 ...

  4. bat(续七)-for语句(循环结构)

    for语句(循环结构) for语句可以实现类似于C语言里面的循环结构,当然for语句的功能要更强大一点,通过不同的开关可以实现更多的功能.for语句有多个开关,不同开关将会实现不同的功能.   1.无 ...

  5. LeetCode——Arithmetic Slices

    Question A sequence of number is called arithmetic if it consists of at least three elements and if ...

  6. 独家git clone 加速方法

    git clone 独家方法 最近需要下载网上很多github库,所以git clone 4kb/s 的速度可以把人逼疯,为了加速git clone才有了这篇博客 网上有很多加速的方案 比如 blog ...

  7. hdu5616 暴力枚举

    2017-08-25 20:08:54 writer:pprp 题目简述: • HDU 5616• n个砝码,可以放在天平左右两侧或不放• m次询问,每次询问是否可以测出给定重量• 1 ≤ n ≤ 2 ...

  8. Mac Homebrew安装php56 到phpstorm过程问题汇总

    Mac自带版本是php5.5,本来是用homebrew安装xdebug 命令:brew install php55-xdebug 但是安装之后使用phpstorm还是有问题.php -v 并没有显示有 ...

  9. OpenDayLight "Error executing command: java.lang.NullPointerException"问题解决

    参考: Fedora 21 mostly working but NullPointerException at Karaf shell 在使用ODL的时候,安装功能组件时出现: Error exec ...

  10. python 类和对象的属性

    python类和对象的属性分为类属性和对象属性两大类,类属性属于类,而对象属性属于对象. 1. 父类的对象属性会被子类的对象继承. 2. 父类的类属性会被子类继承,还是作为类属性,如果父类改变了类属性 ...