css3渐变

渐变属性

属性：
background-images:linear-gradient(位置，颜色1，颜色2…颜色n);
当不兼容时，加上兼容前缀：
谷歌：-webkit-linear-gradient(位置，颜色1，颜色2…颜色n);
火狐：-moz-linear-gradient(位置，颜色1，颜色2…颜色n);
综合写法：
background:linear-gradient(位置，颜色1，颜色2)；

渐变方式之线性渐变

#线性渐变方向（位置）
1、单一方向渐变
需要添加兼容前缀：
top 从顶部开始渐变
bottom 从底部开始渐变
left 从左边开始渐变
right 从右边开始渐变
例如：background:-moz-linear-gradient(top,blue yellow,red);

不需要添加兼容前缀：
to top 从顶部开始渐变
to bottom 从底部开始渐变
to left 从左边开始渐变
to right 从右边开始渐变
例如：background:linear-gradient(top,blue yellow,red);
2、对角渐变
需要兼容前缀
left top 从左上角开始渐变
right bottom 从右下角开始渐变
例如： background: -moz-linear-gradient(right bottom,blue,yellow,pink);

不需要兼容前缀
to left top
to right bottom
例如：background: linear-gradient( to left top,red,yellow,pink);

background:linear-gradient(to right top,green ,blue,purple);

3、角度渐变
background:-moz-linear-gradient(10deg,red,yellow,pink);

4、指定颜色分布的百分比
background:-moz-linear-gradient(left,red 10%,purple 60%,pink);
红色渐变从10%开始到60%紫色开始渐变，10%之前都是红色；
也可以将百分比换成具体的px单位值；

渐变方式之径向渐变

注意：一定要加浏览器前缀
含义：从一个点到四周的渐变
background: -moz-radial-gradient(渐变位置，形状，颜色1，颜色2…);
1、渐变位置
默认：从中心向四周
left ：从左边向四周
top：从顶部向四周
right：从右边向四周
left top：从左上角开始
right bottom：从右下角开始
10px 30px 距离左边10px，上边30px
例如：
background: -moz-radial-gradient(right top,red,yellow,purple);2、渐变形状
默认椭圆
background: -moz-radial-gradient(ellipse，颜色1，颜色2…) ;
正圆
background: -moz-radial-gradient(circle,颜色1,颜色2…);
正圆举例：
background: -moz-radial-gradient(circle,red,yellow,purple);

渐变重复

1、 线性渐变：
background: repeating-linear-gradient(to left,#999 10%,#fff20%);
background: -moz-repeating-linear-gradient(right,#000 20%,#fff 25%);

2、径向渐变：
background: repeating-radial-gradient(yellow,red 10%,blue 20%);
/* 径向渐变可以不加浏览器前缀 */
例如!：background:repeating-radial-gradient(red,yellow 10%,purple 30%);