在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说Photoshop，你对线性渐变并不会陌生。

兼容性问题很严重，我们这里只讲解线性渐变

语法格式：

 background:-webkit-linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)；
 background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)；

具体见CSS背景，渐变和列表。

CSS——背景渐变的更多相关文章

  1. CSS背景渐变支持transition过渡效果

    background-image 是不支持 CSS3 的transition过渡效果的,而CSS3 gradient 渐变作为背景图片存在的时候, 下面的CSS不会有过渡效果 <div clas ...

  2. Css背景渐变

    语法: background:linear-gradient( 渐变方向,起点颜色,终点颜色 ) 参数说明: 渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而 ...

  3. css背景渐变兼容（兼容所有ie）

    css3里面一行可以搞定的事,换到ie里,要用滤镜,在网上找了很多,不知道什么原因都没用,终于找到个有用的,放在这里,方便大家用,自己也找得到~ 完整型代码,兼容所有浏览器: ​background: ...

  4. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  5. CSS3魔法堂：背景渐变（Gradient）

    一.前言 很久之前就了解过CSS3的线性渐变(Linear-Gradient),这段时间决定进一步认知这一特性,以下笔记以便日后查阅. 二.CSS3的各种背景渐变   1. 线性渐变 示例——七彩虹 ...

  6. CSS gradient渐变之webkit核心浏览器下的使用以及实例

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  7. 用jq实现鼠标移入按钮背景渐变其他的背景效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. DIY cnblog——背景渐变切换

    进来的小伙伴应该已经看过了我的博客样式,但还是贴张图先: 先大致说一下实现的思路,然后把代码贴出来供小伙伴们参考. 由于不是特别技术性的文章,格式就放宽松一点,跟着意识流走吧. 先跟大家分享一个渐变背 ...

  9. CSS——背景及应用

    CSS 可以添加背景颜色和背景图片,以及进行图片设置. none : 无背景图(默认的) url : 使用绝对或相对地址指定背景图像 background-image 属性允许指定一个图片展示在背景中 ...

随机推荐

  1. webpack 配置之入门二（css 篇）

    在项目中我们通过 css 来美化页面,css 也成为了网站不可或缺的一部分,这章节主要介绍 webpack 处理 css 部分, 1.webpack 处理 css 在 webpack 中,我们通过 s ...

  2. python 生成推导式

    推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据序列构建另一个新的数据序列的结构体. 共有三种推导,在Python2和3中都有支持: 列表(lis ...

  3. session之memcache

    nginx服务器配置:192.168.200.111[root@nginx ~]# hostname nginx[root@nginx ~]# bash[root@nginx ~]# vim /usr ...

  4. shell command to replace UltraEdit

    cat abc.txt |hexdump -C cat abc.txt |hexdump -C

  5. RabbitMQ学习第四记：路由模式（direct）

    1.什么是路由模式(direct) 路由模式是在使用交换机的同时,生产者指定路由发送数据,消费者绑定路由接受数据.与发布/订阅模式不同的是,发布/订阅模式只要是绑定了交换机的队列都会收到生产者向交换机 ...

  6. final、finally和finalized的区别？

    (1)final:被final修饰的类,不被能继承:被final修饰的方法,不能被重写:被fianl修饰的量,为常量,只能被赋值一次: (2)finally:异常处理,和try.catch结合使用,可 ...

  7. CSIC_716_20191129【 单例模式 的五种实现方式】

     单例模式 单例模式:在确定类中的属性和方法不变时,需要反复调用该类的情况.  让所有通过该类实例化出的对象,都指向同一个内存地址. 优点:节省内存空间. 单例模式有五种表现形式: 1.通过class ...

  8. 【JZOJ6419】模拟旅行&【BZOJ5506】【luoguP5304】旅行者

    description 某国有n座城市,这些城市之间通过m条单向道路相连,已知每条道路的长度. 不过,小X只对其中k座城市感兴趣. 为了更好地规划模拟旅行路线,提升模拟旅行的体验,小X想要知道他感兴趣 ...

  9. 构建高性能高并发Java系统 .

    转:http://blog.csdn.net/nengyu/article/details/7591854 场景这里指的高性能高并发服务器是一个有状态的服务,可以理解成web或者socket服务器,每 ...

  10. 数据结构C++版-队列

    一.概念 分类: 二.补充说明 1.<面向对象的队列设计>课程问答: 首先要明确数据结构和数据存储结构的概念. 数据结构是指数据对象之间的逻辑关系,例如二叉树,队列,栈等,而数据存储结构是 ...