CSS渐变的简单使用

前言

重拾css后的文章，在观看了慕课网上的视频《重拾CSS的乐趣》中，看到了一些有意思的css效果。想起当初自己初学CSS3时画的哆啦A梦，总结了一番css制作的各种图形。渐变效果是在实现弧边三角的时候学习的。

分享一下CodePen中的代码效果：
弧形demo
三角形demo
多重边框demo

一、渐变简介

渐变是两种或多种颜色之间的平滑过渡。在创建渐变的过程中，可以指定多个中间颜色值，这个值称为色标。每个色标包含一种颜色和一个位置，浏览器从每个色标的颜色淡出到下一个，以创建平滑的渐变。

渐变可以应用于任何使用背景图片的地方。这意味着在CSS样式中，渐变相当于背景图片，在理论上可在任何使用url() 值的地方采用，比如最常见的background-image、list-style-type以及前面介绍的CSS3的图像边框属性border-image。但直到目前为止，仅在背景图片中得到最完美的支持。

二、线性渐变

沿着一条直线的颜色过渡效果：从左侧到右侧、从右侧到左侧、从顶部到底部、从底部到顶部或着沿任何任意轴：

1. 基础语法

最新的浏览器都已经支持标准写法

 -webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)  //webkit引擎Chrome
 -moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) //Gecko引擎Firefox
 -o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) //Presto引擎Opera
 -ms-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*) //Trident引擎IE
 linear-gradient([[<angle> | to <side-or-corner> ],]?<color-stop>[,<color-stop>]+)//w3c标准

其中，point指向、angle角度代表方向，stop、color-stop代表各个颜色。

关键字写法：

 background-image: -webkit-linear-gradient(left,blue,white);
 background-image: -moz-linear-gradient(left,blue,white);
 background-image: -o-linear-gradient(left,blue,white);
 background-image: -ms-linear-gradient(left,blue,white);
 background-ima