在线性渐变过程中，颜色沿着一条直线过渡：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴。如果你曾使用过制作图件，比如说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. Springboot循环依赖

    背景 最近在使用Springboot做项目的时候,遇到了一个循环依赖的 问题.那什么是循环依赖呢,常见的一种情形就是在ServiceA中注入了ServiceB,在ServiceB中也注入了Servic ...

  2. 【HDOJ】P1215 七夕节

    题目意思很简单,不解释 有两种方法, 1是暴力法,不就是 2就是下面要讲的方法 假如果说一个数n可以被b整除,那么一定可以被b的因子整除 那么我需要做的就是枚举这些因子 多余的请看代码 #includ ...

  3. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  4. Mysql 查询表中某字段的重复值，删除重复值保留id最小的数据

    1 查询重复值 ); 2 删除重复值 -- 创建临时表 ) ); -- 把重复数据放进临时表 INSERT Hb_Student_a SELECT id,studentNumber FROM Hb_S ...

  5. Wpf 获取指定字体和大小的字符的长宽

    Wpf 获取指定字体和大小的字符的长宽 运行环境:Win10 x64, NetFrameWork 4.8, 作者:乌龙哈里,日期:2019-05-09 参考: 章节: 比如一个 Consolas 字体 ...

  6. wordpress翻译插件gtranslate

    https://www.gdstautoparts.com/

  7. c++ TCP 获取客户端IP

    #include<stdio.h> #include<stdlib.h> #include<string.h> #include<errno.h> #i ...

  8. Delphi Xml

    用递归方法,使用 xml 文档生成 Treeview 树形视图.由于是动态生成,所以可以通过修改 xml 的逻辑来定制 Treeview 的结构,从而实现了 xml 对 Treeview 的动态配置, ...

  9. [学习笔记] $FWT$

    \(FWT\)--快速沃尔什变化学习笔记 知识点 \(FWT\)就是求两个多项式的位运算卷积.类比\(FFT\),\(FFT\)大多数求的卷积形式为\(c_n=\sum\limits_{i+j=n}a ...

  10. NX二次开发-UFUN链表UF_MODL_create_list等用法

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_curve.h> #include < ...