线性渐变:
CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient(渐变方向,色彩1,位置1,色彩2,位置2...)
对于线性渐变的方向,只要设置起点即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度来表示,
例如45o表示左下到右上,-45o表示左上到右下。 角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg
IE10以下的浏览器不支持此语法, 建议使用chrome浏览器或其他浏览器来浏览下面的范例
径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
我们可以使用渐变工具来生成gradient语法
Ultimate CSS Gradient Generator
网址：
http://www.colorzilla.com/gradient-editor/
Orientation: 渐变方向