CSS3线性渐变与径向渐变

兼容性

IE9及之前版本不兼容

线性渐变

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

其中，angle是角度，以逆时针方向计算
side-or-corner的取值有left,right,top,bottom，（对应270deg，90，0，180），bottom为默认值。
color-stop指渐变的起止颜色，属性有length，指定起止色位置，不允许负值。percentage，指定起止色百分比位置。

颜色可以使用rgba()或hsla()。
rgba() 红、绿、蓝、透明度，透明度Alpha是0-1之间的浮点数
hlsa()

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%
A：Alpha透明度。取值0~1之间。

transparent指全透明色，可以用在任何color。

径向渐变

background: radial-gradient()

默认从center开始，默认形状为 ellipse椭圆形，可以是circle圆形。

---

应用

线性渐变可以生成棋盘图案、条纹背景
径向渐变可以生成波点图案

角向渐变

也称圆锥渐变，尚没有浏览器支持。生成方式：所有色标的颜色变化是由一条射线绕着端点旋转来推进的。