CSS3 - 线性渐变、径向渐变

线性渐变

语法：

background: linear-gradient([direction,] start-color, [middle-color1, [middle-color2, [...]]] stop-color);

参数解析：
direction：线性渐变的方向，默认从上到下（to bottom、180deg），还可以从下到上（to top、0deg）、从左到右（to right、90deg）、从右到左（to left、270deg）、从左上角到右下角（to bottom right、135deg）、从右上角到左下角（to bottom left、225deg）、从左下角到右上角（to top right、45deg）、从右下角到左上角（to top left、315deg）、任意角度（n deg）
start-color：开始颜色，如：red、red 20%
middle-color：位于开始颜色与结束颜色中间的渐变色，如：red、red 20%
stop-color：结束颜色，如：red、red 20%

运行结果：

径向渐变

语法：

background: radial-gradient([center,] [shape size,]  start-color, [middle-color1, [middle-color2, [...]]] stop-color);

参数解析：
center：圆心位置及半径长度
start-color：开始颜色，如：red、red 20%
middle-color：位于开始颜色与结束颜色中间的渐变色，如：red、red 20%
stop-color：结束颜色，如：red、red 20%

运行结果：