CSS3径向渐变(radial-gradient)

1.各浏览器下渐变语法：

1.Webkit引擎的CSS3线性渐变语法与属性参数：

-webkit-gradient([<type>],[<position> || <angle>,]?[<shape> ||<size>,]?<color-stop>,<color-stop>[,<color-stop>]*);   //老式语法书写规则

-webkit-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);   //新式语法

2.Gecko引擎的CSS3线性渐变语法与属性参数：

-moz-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);  

3.Presto引擎的CSS3线性渐变语法与属性参数：

-o-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);    

4.Trident引擎的CSS3线性渐变语法与属性参数：

-ms-radial-gradient([<position> || <angle>,]?[<shape> || <size>,]?<color-stop>,<color-stop>[,<color-stop>]*);   

5.W3C标准线性渐变语法与属性参数：

radial-gradient([[<shape> || <size>] [at <position>]?,| at <position>,]?<color-stop>[,<color-stop>]+);  

2.CSS3径向渐变的属性参数：

1. 属性参数position：用来定义径向渐变的圆心位置。默认值”center”

• length：用长度值指定径向渐变圆心的横坐标或纵坐标。可以为负值。
• percentage：用百分比指定径向渐变圆心的横坐标或纵坐标。可以为负值。
• left：设置左边为径向渐变圆心的横坐标值。
• center：设置中间为径向渐变圆心的横坐标值或纵坐标。
• right：设置右边为径向渐变圆心的横坐标值。
• top：设置顶部为径向渐变圆心的纵标值。
• bottom：设置底部为径向渐变圆心的纵标值。

2. 属性参数shape：定义径向渐变的形状。其主要包括两个值“circle”和“ellipse”.

• circle：如果size和length大小相等，那么径向渐变是一个圆形，也就是用来指定圆形的径向渐变
• ellipse：如果size和length大小不相等，那么径向渐变是一个椭圆形，也就是用来指定椭圆形的径向渐变。

3. 属性参数size：主要用来确定径向渐变的结束形状大小。如果省略了，其默认值为“farthest-corner”。可以给其显式的设置一些关键词。

• closest-side：指定径向渐变的半径长度为从圆心到离圆心最近的边；
• closest-corner：指定径向渐变的半径长度为从圆心到离圆心最近的角；
• farthest-side：指定径向渐变的半径长度为从圆心到离圆心最远的边；
• farthest-corner：指定径向渐变的半径长度为从圆心到离圆心最远的角；

4. 属性参数color-stop：径向渐变线上的停止颜色。

径向渐变的为渐变线从中心点向右扩散。其中0%表示渐变线的起始点，100%表示渐变线的与渐变容器相交结束的位置。而且其颜色停止可以定义一个负值。

3.CSS3线性渐变的基本用法：

1圆形渐变（circle）和椭圆渐变(ellipse)：

椭圆渐变：主要半径（水平半径）和次要半径（垂直半径）不相同；

background-image:radial-gradient(ellipse at right,red,green);

圆形渐变：主要半径（水平半径）和次要半径（垂直半径）相同，特殊的椭圆！

background-image:radial-gradient(circle at center center,red,green);

2.渐变圆心定位：(使用关键字或百分比)

• center / at 50% 50%
• top / at 50% 0%
• right / at 100% 50%
• bottom / at 50% 100%
• left / at 0% 50%
• top left / at 0% 0%
• top right / at 100% 0%
• bottom right / at 100% 100%
• bottom left / at 0% 100%

主要是以上各个圆心定位点，看图：

3.关键词设置

4.多色径向渐变：

background-image:radial-gradient( circle at center, #f28fb8, #e982ad, #ec568c);

5.应用：

可以配合字体图标、文字阴影text-shadow、盒阴影box-shadow和多背景制作炫酷圆形突变按钮

总结：主要整理了下CSS3径向渐变在各大浏览器下的兼容写法，属性参数、各个圆心定位点渐变的使用用法以及多色渐变的简要写法！