线性渐变:
CSS3可以让背景产生渐变效果,渐变属性有两种,即linear-gradient(线性渐变)和radial-gradient(圆形渐变),语法如下
background: linear-gradient(direction, color-stop1, color-stop2, ...);
linear-gradient(渐变方向,色彩1,位置1,色彩2,位置2...)
对于线性渐变的方向,只要设置起点即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度来表示,
例如45º表示左下到右上,-45º表示左上到右下。 角度等同于钟表: 12点: 0deg 3点: 90deg 6点: 180deg 9点: 270deg
IE10以下的浏览器不支持此语法, 建议使用chrome浏览器或其他浏览器来浏览下面的范例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{ margin: 0; padding: 0;}div{ width: 800px; height: 300px; margin: 0 auto; border: 1px solid #000; background-image: linear-gradient(90deg,red 50%,blue 90%,pink,green,orange);}</style></head><body><div></div></body></html>径向渐变
background: radial-gradient(center, shape size, start-color, ..., last-color);
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{ margin: 0; padding: 0;}div{ width: 400px; height: 400px; border-radius: 50%; margin: 0 auto; background-image: radial-gradient(blue 100px,red); background-image: radial-gradient(orange,yellow,#fff,transparent);}</style></head><body><div></div></body></html>重复的线性渐变
repeating-linear-gradient() 函数用于重复线性渐变：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{ margin: 0; padding: 0;}div{ width: 400px; height: 400px; margin: 100px auto; border-radius: 50%; border: 1px solid red; background-image: repeating-radial-gradient(#fff 0px,#fff 10px,#000 10px,#000 20px);}</style></head><body><div></div></body></html>我们可以使用渐变工具来生成gradient语法
Ultimate CSS Gradient Generator
网址：http://www.colorzilla.com/gradient-editor/
Orientation: 渐变方向
