首先，让我们来了解一下“linear-gradient”的基本用法：

说明：用线性渐变创建图像

语法：

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

<angle>：用角度值指定渐变的方向（或角度）。

to left：设置渐变为从右到左。相当于: 270deg

to right：设置渐变从左到右。相当于: 90deg

to top：设置渐变从下到上。相当于: 0deg

to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

<color-stop>：用于指定渐变的起止颜色：

<color>：指定颜色。

<length>：用长度值指定起止色位置。不允许负值

<percentage>：用百分比指定起止色位置。

其他知识点：

不知你是否注意到“第一个”语法后面的“+”号没，这些符号（“?”、“+”、“*”）其实用法跟正则表达式很像，如果正则表达式不知道的请看下面正解：

　　,：代表每个属性之间的分隔符号。

　　?：代表“属性”可以出现零次或一次，也就是可有可无

　　+：代表“属性”可以出现一次或多次，但是必须出现一次

　　*：代表“属性”可以出现零次或多次。

　　|：代表可以从多个“属性”中任选一个。

　　||：代表“属性”可以是左边的一个或是右边的一个，或是两个都行

　　[]：代表里面是“属性”或“属性”集合

　　<>：这个不是正则表达式里面的，但是它代表定义的取值范围，如上语法的“<angle>”，取值的里面就会附带说明这个“<angle>”是干嘛的

　　{1,4}：代表“属性”最少出现一次，最多出现四次。“1”和“4”都是动态的值，不是固定的，根据描述而定

来看看基本用法实例：

　　

　　(图1)

　　linear-gradient(#fff, #333);

　　linear-gradient(to bottom, #fff, #333);

　　linear-gradient(to top, #333, #fff);

　　linear-gradient(180deg, #fff, #333);

　　linear-gradient(to bottom, #fff 0%, #333 100%);

　　以上这五句样式都可以实现（图1）的渐变效果

再来看看复杂点的普通实例：

 <!DOCTYPE html>

 <html>

 <head>

 　　<meta charset="utf-8" />

 　　<title></title>

 　　<style>

 　　　　div { width: 200px; height: 100px; margin-top: 10px; border: 1px solid #ddd;}

 　　　　.test { background: linear-gradient(#fff, #333);}

 　　　　.test2 { background: linear-gradient(#000, #f00 50%, #090);}

 　　　　.test3 { background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);}

 　　　　.test4 { background: linear-gradient(45deg, #000, #f00 50%, #090);}

 　　　　.test5 { background: linear-gradient(to top right, #000, #f00 50%, #090);}

 　　</style>

 </head>

 <body>

 　　<div class="test"></div>

 　　<div class="test2"></div>

 　　<div class="test3"></div>

 　　<div class="test4"></div>

 　　<div class="test5"></div>

 </body>

 </html>

效果图：

再让我们看看“高能”的用法：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title></title>

     <style>

         body{ background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #99958%, transparent 62%), #444; background-size: 16px 48px;}

     </style>

 </head>

 <body>

 </body>

 </html>

效果图：

怎么样，效果是不是很酷炫？再瞧瞧其他的：

还有更多好看的就不展示了，源自国外大牛：http://lea.verou.me/css3patterns/#chocolate-weave

其中的几个重要知识点总结：

■Ⅰ.“background”的绘制顺序是从后面的开始向前面的绘制的，百说不如一栗：

 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;

background绘制时是从“linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753”绘制到...头部的“linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0)”渐变样式。所以这“点”要注意了。

■Ⅱ.每一个使用“linear-gradient”绘制出来的渐变效果，都可以看作是一张背景图。因为，这个可以在“background-size”里设置（每个背景图的大小用逗号“,”区分）。

■Ⅲ.【非常重要】，制作复杂的背景图并不难，但是你得知道“background-repeat”的原理就是每一张背景图都按照你设定的“属性”去绘制。如果你不知道这个原理，甚至没注意到。那么当你第一次看到这么漂亮的背景效果，想自己动手丰衣足食的时候却发现，“What is this？”，看看我第一次写的背景效果。

第一次写的：

理想样子：

实际样式：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title></title>

 <style>

 body{

     background:linear-gradient(to right, transparent 0%, #F00 0%, #F00 100%, transparent 100%) 25px 25px,

     linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%),

     linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),

     linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%);

     background-color:#FFF;

     background-size:25px 25px, 50px 50px, 50px 50px, 50px 50px;

     background-repeat:repeat;

 }

 </style>

 </head>

 <body>

 </body>

 </html>
效果图：

⊙︿⊙ 好桑心，怎么整个网页红色的？

其实这其中就是“background-repeat”的原理问题：每个图片都是x、y复制绘制的“background-repeat:repeat”，所以当“background-size”不是一致的时候，复制绘制的位置也是不一样的。

知道是这个原因了，改动一下。

正确的样式：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8" />

 <title></title>

 <style>

 body{

     background:linear-gradient(135deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%) 25px 25px,

     linear-gradient(315deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%),

     linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%),

     linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),

     linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%);

     background-color:#FFF;

     background-size:50px 50px;

     background-repeat:repeat;

 }

 </style>

 </head>

 <body>

 </body>

 </html>

效果图：

知道原理才是硬道理 ╰(￣▽￣)╮

linear-gradient 的“高能”用法的更多相关文章

  1. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  2. CSS3 Gradient 渐变

    转载自:http://www.w3cplus.com/content/css3-gradient CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE, ...

  3. CSS3 Gradient

    CSS3CSS3发布很久了,现在在国外的一些页面上常能看到他的身影,这让我羡慕已久,只可惜在国内为了兼容IE,让这一项技术受到很大的限制,很多Web前端人员都望而止步.虽然如此但还是有很多朋友在钻研C ...

  4. CSS3 Gradient渐变效果

    最近看到一遍关于渐变的文章,感觉很好,只是收藏感觉太可惜了,就转载了,好好学习! CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). ...

  5. android Bitmap用法总结（转载）

    Bitmap用法总结1.Drawable → Bitmappublic static Bitmap drawableToBitmap(Drawable drawable) {Bitmap bitmap ...

  6. 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）

    CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...

  7. 【高级功能】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

  8. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  9. 【温故而知新-Javascript】使用canvas元素（第一部分）

    1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素 ...

随机推荐

  1. C#_delegate EndInvoke

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Android（java）学习笔记128:使用proguard混淆android代码

    1.当前是有些工具比如apktool,dextojar等是可以对我们android安装包进行反编译,获得源码的.为了减少被别人破解,导致源码泄露,程序被别人盗取代码,等等.我们需要对代码进行混淆,an ...

  3. web项目设计与开发——DBHelper3

    本次学习的内容为根据DBHelper对数据库里的数据进行增删改查 具体内容为: 一.编写程序 1.创建工程——Mangage    2.在src目录下创建五个包,分别为DAO,DBHelper,Ent ...

  4. javascript数据结构和算法[转]

    字符串表示的数组 join() 和 toString() 函数返回数组的字符串表示.这两个函数通过将数组中的元素用逗号分隔符分割,返回字符串数组表示. 这里有个例子: var names = [&qu ...

  5. 关于git的cherry-pick命令

    $ git cherrypick 用一条新的指令-----拣选指令(git cherry-pick) 实现提交在新的分支上"重放", 拣选指令----git cherry-pick ...

  6. Matlb中break 和continue 语句

    有两个附加语句可以控制while 和for 循环:break 和continue 语句. break 语句可以中止循环的执行和跳到end 后面的第一句执行,而continue 只中止本次循环,然后返回 ...

  7. JAVA8永久代

    在Java虚拟机(以下简称JVM)中,类包含其对应的元数据,比如类的层级信息,方法数据和方法信息(如字节码,栈和变量大小),运行时常量池,已确定的符号引用和虚方法表. 在过去(当自定义类加载器使用不普 ...

  8. C# string类型遇到的两个问题

    最近在维护一位离职的同事写的WPF代码,偶然发现他使用C# string类型的两个问题,在这里记录一下. 1. 使用Trim函数移除字串中的空格.换行符等字符串. csRet.Trim(new cha ...

  9. JSON数据理解

    话说JSON数据平常用的确实挺多的,但是基本上只知道怎么用,对其一些细节并没有整理过,今儿趁着下午有点空,坐下来,学习整理下,并分享出来. 对于JSON,首先它只是一种数据格式,并非一种语言,虽然和j ...

  10. ASP怎样获得代码中第一张图片地址

    '把pattern 又修改了下 'code要检测的代码 'http://www.knowsky.com/asp.asp 'leixing html 或者ubb 'nopic 代码没有图片时默认值 fu ...