CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。
[img]http://dl2.iteye.com/upload/attachment/0106/9652/c6f1a934-e6da-3478-864a-1963ae5cbccb.jpg[/img]
第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
角度 英文 作用
0deg to top 由下向上
90deg to right 由左向右
180deg to bottom 由上向下
270deg to left 由右向左
to top left 右下角向左上角
to top right 左下角向右上角
[img]http://dl2.iteye.com/upload/attachment/0106/9658/d91067ae-b581-312e-9de1-08fdfb541f33.jpg[/img]
[img]http://dl2.iteye.com/upload/attachment/0106/9652/c6f1a934-e6da-3478-864a-1963ae5cbccb.jpg[/img]
第一个参数:指定渐变方向,可以用“角度”的关键词或“英文”来表示。
第二个和第三个参数,表示颜色的起始点和结束点,可以有多个颜色值。
角度 英文 作用
0deg to top 由下向上
90deg to right 由左向右
180deg to bottom 由上向下
270deg to left 由右向左
to top left 右下角向左上角
to top right 左下角向右上角
background-image:linear-gradient(to top left, red, orange,yellow,green,blue,indigo,violet);
[img]http://dl2.iteye.com/upload/attachment/0106/9658/d91067ae-b581-312e-9de1-08fdfb541f33.jpg[/img]