css3渐变(Gradients)
<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)的更多相关文章
- Css3渐变(Gradients)-径向渐变
CSS3径向渐变-radial-gradient()/repeating-radial-gradient() 径向渐变由它的中心定义. 创建径向渐变,至少定义两种颜色节点,呈现平稳过度的颜色.同时,你 ...
- CSS3渐变(Gradients)-线性渐变
CSS3渐变(Gradients)可以让你在两个或多个指定颜色之间显示平稳的过度,包括透明度. 以前,你必须使用图像来实现这些效果.但是,通过Css3渐变(Gradients),你可以减少下载的事件和 ...
- Css3渐变实例Demo（一）
1.指定渐变背景的大小 .div { background: url(../img/1.jpg); /*background-size:contain;*/ width: 500px; height: ...
- CSS3 渐变（Gradients）
参考: http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必 ...
- Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
Westciv Tools主要为CSS3提供了渐变gradients.盒子阴影box-shadow.变形transform和文字描边四种在线生成效果的工具 1.Westciv Tools 彩蛋爆料直击 ...
- CSS3：CSS3 渐变（Gradients）
ylbtech-CSS3:CSS3 渐变(Gradients) 1.返回顶部 1. CSS3 渐变(Gradients) CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳 ...
- Web前端方向课程要点：CSS3渐变制作过程
CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现. ...
- 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画
14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...
- CSS-3 渐变的使用
CSS3 渐变(gradients)可以让您在两个或多个指定的颜色之间显示平稳的过渡. 以前,您必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),您可以减少下载的事件和 ...
随机推荐
- try catch 与 throw拾遗
今天在微软虚拟学院看到的代码: var b = 0; try{ if (b == 0) { throw('NO NO!!'); } else { alert('OK OK'); }} catch(e) ...
- 分离EF connectionString里的db连接串
创建EF模型后,自动生成的connectionString如下: <add name="TravelPPEntities" connectionString="me ...
- 每天一个linux命令（54）：ping命令
Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...
- Redis总结笔记（二）：C#连接Redis简单例子
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/113.html?1455860686 注:C#在调用Redis是不要使用S ...
- GUID相关知识
全局唯一标识符(GUID,Globally Unique Identifier)是一种由算法生成的二进制长度为128位的数字标识符.GUID主要用于在拥有多个节点.多台计算机的网络或系统中.在理想 ...
- lua table序列化和反序列化
function serialize(obj) local lua = "" local t = type(obj) if t == "number" then ...
- Atitit 编程语言原理与概论attilax总结 三大书籍总结
Atitit 编程语言原理与概论attilax总结 三大书籍总结 编程语言原理(第10版) 目录: 第1章 预备知识第2章 主要程序设计语言的发展第3章 描述语法和语义第4章 词法分析和语法分析第5章 ...
- Atitit prj 项目管理与行政管理(1)------项目环境的概览与建立
Atitit prj 项目管理与行政管理(1)------项目环境的概览与建立 1. 环境的4大特点 (1)多样性与复杂性. (2)差异性.(3)变异性.(4)关联性.2 2. 环境的分类,最常用使用 ...
- Paip.语义分析----情绪情感词汇表总结
Paip.语义分析----情绪情感词汇表总结 以下词语是按感情色彩共分为十四类: 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:h ...
- WPF Bitmap转Imagesource
var imgsource = System.Windows.Interop.Imaging.CreateBitmapSourceFromHBitmap(bmp.GetHbitmap(),IntPtr ...