一. 渐变 Gradient
针对不同浏览器，因为浏览器的内核不同，所以写法也不同。主要浏览器通过内核分类如下：Mozilla（Gecko）（熟悉的有Firefox，Flock等浏览器）、WebKit（熟悉的有Safari、Chrome等浏览器）、Opera(presto)（Opera浏览器）、Trident（讨厌的IE浏览器）。
<1> 线性渐变 linear-gradient
(1) 线性渐变在Mozilla下的应用
-moz-linear-gradient( [<point> || <angle>,]? <beginColor>, <stopColor> )
栗子：
.example1 {
background: -moz-linear-gradient( top,#ccc,#000);
}
- top 是从上往下渐变
- left 是从左往右渐变
- left top 从左上角向右下角渐变
(2) 线性渐变在Webkit下的应用
-webkit-linear-gradient( [<point> || <angle>,]? <beginColor>, <stopColor> )//最新发布书写语法
(3) 其他浏览器
<2> 径向渐变
radial-gradient([[<shape> || <size>] at [<positionX || positionY?>,]? <color-stop> [,<color-stop>]+);
几个属性如下：
-
< position > 主要用来定义径向渐变的圆心位置。
- <length>：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。 - <percentage>：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。 - left：设置左边为径向渐变圆心的横坐标值。 - center：设置中间为径向渐变圆心的横坐标值或纵坐标。 - right：设置右边为径向渐变圆心的横坐标值。 - top：设置顶部为径向渐变圆心的纵标值。 - bottom：设置底部为径向渐变圆心的纵标值。 -
< shape > 主要用来定义径向渐变的形状。
- circle：如果<size>和<length>大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变 - ellipse：如果<size>和<length>大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。 -
< size > 主要用来确定径向渐变的结束形状大小。
- closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边； - closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角； - farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边； - farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；
注意：
如果设置了“ellipse”或者省略，可能显式设置为［|］。主要用来设置椭圆的大小。第一个值代表椭圆的水平半径，第二个值代表垂直半径。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
<3> 圆锥渐变 conic-gradient
(1) 最简单用法
background: conic-gradient(deeppink, yellowgreen);
(2) 简单的颜色表盘
{
width : 200
height : 200
border-radius: 5
background : conic-gradient( red , orange, yellow, green , teal , blue , purple);
}
(3) 配合百分比使用 （两种写法）
(4) 重复圆锥渐变 repaeting-conic-gradient
会自动实现重复设置的渐变，填满整个区域
