gradient

线性渐变linear-gradient:

1.-moz-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)
2.
-webkit-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]*)//最新发布书写语法
-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)//老式语法书写规则
-o-linear-gradient([<point>||<angle>,]?<stop>,<stop>[,<stop>]);/*Opera11.10+*/
4.
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#1471da,endColorstr=#1C85FB)";/*IE8+*/

.deg0{
background:-moz-linear-gradient(0deg,#ace,#f96);
background:-webkit-gradient(linear,050%,100%50%,from(#ace),to(#f96));
background:-webkit-linear-gradient(0deg,#ace,#f96);
background:-o-linear-gradient(0deg,#ace,#f96);
}

.deg45{
background:-moz-linear-gradient(45deg,#ace,#f96);
background:-webkit-gradient(linear,0100%,100%0%,from(#ace),to(#f96));
background:-webkit-linear-gradient(45deg,#ace,#f96);
background:-o-linear-gradient(45deg,#ace,#f96);
}
.deg90{
background:-moz-linear-gradient(90deg,#ace,#f96);
background:-webkit-gradient(linear,50%100%,50%0%,from(#ace),to(#f96));
background:-webkit-linear-gradient(90deg,#ace,#f96);
background:-o-linear-gradient(90deg,#ace,#f96);
}
.deg135{
background:-moz-linear-gradient(135deg,#ace,#f96);
background:-webkit-gradient(linear,100%100%,00,from(#ace),to(#f96));
background:-webkit-linear-gradient(135deg,#ace,#f96);
background:-o-linear-gradient(135deg,#ace,#f96);
}
.deg180{
background:-moz-linear-gradient(180deg,#ace,#f96);
background:-webkit-gradient(linear,100%50%,050%,from(#ace),to(#f96));
background:-webkit-linear-gradient(180deg,#ace,#f96);
background:-o-linear-gradient(180deg,#ace,#f96);
}
.deg225{
background:-moz-linear-gradient(225deg,#ace,#f96);
background:-webkit-gradient(linear,100%0%,0100%,from(#ace),to(#f96));
background:-webkit-linear-gradient(225deg,#ace,#f96);
background:-o-linear-gradient(225deg,#ace,#f96);
}
.deg270{
background:-moz-linear-gradient(270deg,#ace,#f96);
background:-webkit-gradient(linear,50%0%,50%100%,from(#ace),to(#f96));
background:-webkit-linear-gradient(270deg,#ace,#f96);
background:-o-linear-gradient(270deg,#ace,#f96);
}
.deg315{
background:-moz-linear-gradient(315deg,#ace,#f96);
background:-webkit-gradient(linear,0%0%,100%100%,from(#ace),to(#f96));
background:-webkit-linear-gradient(315deg,#ace,#f96);
background:-o-linear-gradient(315deg,#ace,#f96);
}
.deg360{
background:-moz-linear-gradient(360deg,#ace,#f96);
background:-webkit-gradient(linear,050%,100%50%,from(#ace),to(#f96));
background:-webkit-linear-gradient(360deg,#ace,#f96);
background:-o-linear-gradient(360deg,#ace,#f96);
}

径向渐变：radial-gradient

1.webkit引擎中的浏览器chrome4-9,safari4-5
-webkit-gradient([<type>],[<position>||<angle>,]?[<shape>||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
2.chrome10.0+safari5.1+
-webkit-radial-gradient([<position>||<angle>,]?[<shape>||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
3.geckofirefox3.6+
-moz-radial-gradient([<position>||<angle>,]?[<shape>||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
4.prestoopera11.6+
-o-radial-gradient([<position>||<angle>,]?[<shape>||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);
5.w3c(ie10+,firefox16+)
radial-gradient([[<shape>||<size>][at<position>]?,|at<position>,]?<color-stop>[,<color-stop>]+);
<position>：主要用来定义径向渐变的圆心位置。此值类似于CSS中background-position属性，用于确定元素渐变的中心位置。如果这个参数省略了，其默认值为“center”。其值主要有以下几种：

<length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
<percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
left：设置左边为径向渐变圆心的横坐标值。
center：设置中间为径向渐变圆心的横坐标值或纵坐标。
right：设置右边为径向渐变圆心的横坐标值。
top：设置顶部为径向渐变圆心的纵标值。
bottom：设置底部为径向渐变圆心的纵标值。
<shape>：主要用来定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”：

circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。
<size>：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词，主要有：

closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；
<color-stop>。径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

/*closest-side*/
.closest-side.circle{
background-image:-webkit-radial-gradient(closest-sidecircleat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(closest-sidecircleat50%75%,rgb(220,75,200),rgb(0,0,75));
}
.closest-side.ellipse{
background-image:-webkit-radial-gradient(closest-sideellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(closest-sideellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
}
/*closest-corner*/
.closest-corner.circle{
background-image:-webkit-radial-gradient(closest-cornercircleat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(closest-cornercircleat50%75%,rgb(220,75,200),rgb(0,0,75));
}
.closest-corner.ellipse{
background-image:-webkit-radial-gradient(closest-cornerat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(closest-cornerellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
}
/*farthest-side*/
.farthest-side.circle{
background-image:-webkit-radial-gradient(farthest-sidecircleat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(farthest-sidecircleat50%75%,rgb(220,75,200),rgb(0,0,75));
}
.farthest-side.ellipse{
background-image:-webkit-radial-gradient(farthest-sideellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(farthest-sideellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
}
/*farthest-corner*/
.farthest-corner.circle{
background-image:-webkit-radial-gradient(farthest-cornercircleat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(farthest-cornercircleat50%75%,rgb(220,75,200),rgb(0,0,75));
}
.farthest-corner.ellipse{
background-image:-webkit-radial-gradient(farthest-cornerellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
background-image:radial-gradient(farthest-cornerellipseat50%75%,rgb(220,75,200),rgb(0,0,75));
}