css3 渐变(gradients)由浏览器生成的
线性渐变：
background：-webkit-linear-gradident(方向，颜色1，颜色2，颜色3，.....颜色n )；
1、方向：left （从左边开始） right（从右边开始）
top （从上边开始） bottom（从底边开始）
注意：需要添加兼容前缀
to left 到左边（结束位置） to right 到右边（结束位置）
to top 到顶边（结束位置） to bottom 到底边（结束位置）
注意：不需要添加兼容前缀
2、对角渐变：
left top 左上开始 left bottom左下开始
注意：带兼容前缀
to left top 到左上（结束位置）
注意：不带兼容前缀
3、角度的渐变：
10deg 10度
4、默认情况下颜色均分
可以指定颜色分布的百分比，让颜色按照百分比进行渐变
blue 10% 到10%都是蓝色
red 10px 到10px都是红色
径向渐变（一定要加浏览器兼容前缀）：从一个点到四周的渐变
background：-浏览器兼容前缀-radial-gradient（渐变位置 ，形状，大小，颜色1，颜色2，.....颜色n）；
渐变位置：默认从中心到四周
left 从左边到四周 right 从右边到四周
top 从上边到四周 bottom从底边到四周
left top从左上角到四周 left bottom从左下角到四周
10px 30px 距离左边10px 距离上边30px
形状：默认是椭圆 ellipse
正圆 circle
注意：元素是正方形，则都是正圆
大小：size：渐变的大小，即渐变到哪里停止，它有四个值。
closest-side：最近边；
farthest-side：最远边；
closest-corner：最近角；
farthest-corner：最远角；
渐变重复：repeating-
补充：
渐变用的背景属性是background-img