<html>

http://www.runoob.com/css3/css3-gradients.html

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。

CSS3 定义了两种类型的渐变（gradients）：

    线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

    径向渐变（Radial Gradients）- 由它们的中心定义

语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下（默认情况下）

下面的实例演示了从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例

1.从上到下的线性渐变：

#grad {

  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(red, blue); /* 标准的语法 */

} 

2.线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

实例

从左到右的线性渐变：

#grad {

  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(to right, red , blue); /* 标准的语法 */

}

3.线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

从左上角到右下角的线性渐变：

#grad {

  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */

  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */

  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */

  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */

  }

</html>

css3渐变(Gradients)的更多相关文章

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

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

  2. CSS3渐变(Gradients)-线性渐变

    CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...

  3. Css3渐变实例Demo（一）

    1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...

  4. CSS3 渐变（Gradients）

    参考: http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必 ...

  5. Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具

    Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...

  6. CSS3：CSS3 渐变（Gradients）

    ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...

  7. Web前端方向课程要点：CSS3渐变制作过程

    CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...

  8. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  9. CSS-3 渐变的使用

    CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡. 以前,您必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和 ...

随机推荐

  1. [开源]微信在线信息模拟测试工具（基于Senparc.Weixin.MP开发）

    目前为止似乎还没有看到过Web版的普通消息测试工具(除了官方针对高级接口的),现有的一些桌面版的几个测试工具也都是使用XML直接请求,非常不友好,我们来尝试做一个“面向对象”操作的测试工具. 测试工具 ...

  2. 大叔也说Xamarin~Android篇~为HttpClient共享Session，android与api的session共享机制

    回到目录 杂谈 在进行android进行开发时,我们的数据一般通过接口来获收,这里指的接口泛指web api,webservice,wcf,web应用程序等:它们做为服务端与数据库进行直接通讯,而AP ...

  3. WebApi系列~自主宿主HttpSelfHost的实现

    回到目录 宿主一词我们不会陌生,它可以看作是一个基础设施,它为一些服务和功能提供最底层的支持,如你的web应用程序可以运行在iis或者apache上,而这两个东西就是web应用程序的宿主,而今天说的自 ...

  4. Atitit.异步的实现模式attilax大总结

    Atitit.异步的实现模式attilax大总结 1.1. 函数回调(包括的future模式)1 1.2. 事件机制( 包括定时器 listeners 1 1.3. 中断机制1 1.4. 订阅机制 发 ...

  5. iOS---用LLDB调试，让移动开发更简单（一）

    因文章字数超过限制,所以拆分成了上下篇 LLDB的Xcode默认的调试器,它与LLVM编译器一起,带给我们更丰富的流程控制和数据检测的调试功能.平时用Xcode运行程序,实际走的都是LLDB.熟练使用 ...

  6. 用Chrome插件对自动化测试TestWriter进行录制

    1.打开Chrome浏览器,在浏览地址中输入: chrome://extensions/,并勾选开发者模式.如图: 2.点击按钮[加载已解压的扩展程序-].如图: 3.选择Testwriter客户端下 ...

  7. WPF入门教程系列七——布局之WrapPanel与StackPanel（二）

    三. WrapPanel WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientation— ...

  8. ios app 打包上传 app store（Application Loader）

    背景:使用Xcode 上传APP, 这个 有时候很慢,构建版本需要等很长时间,所以我推荐使用Application Loader 1.使用xocd 打包,导出.ipa文件 2. OK ,跟着上面做, ...

  9. 深入理解javascript作用域系列第二篇——词法作用域和动态作用域

    × 目录 [1]词法 [2]动态 前面的话 大多数时候,我们对作用域产生混乱的主要原因是分不清楚应该按照函数位置的嵌套顺序,还是按照函数的调用顺序进行变量查找.再加上this机制的干扰,使得变量查找极 ...

  10. JSP网站开发基础总结《二》

    有了上一篇的学习,我相信大家对于JSP一定有了一定的认识,从今天开始我们真正开启JSP模式,如果你有HTML的基础,那学起JSP来也就方便了很多了,首先JSP做为网站开发语言,它与HTML有很多相似的 ...