radial-gradient()

版本：CSS3

CSS radial-gradient()函数创建了一个图片，其由一个从原点辐射开的在两个或者多个颜色之前的渐变组成。这个方法得到的是一个CSS <gradient>数据类型的对象，其是<image>的一种。

示例

background: radial-gradient(#e66465, #9198e5);
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
background: radial-gradient(ellipse at top, #e66465, transparent),
            radial-gradient(ellipse at bottom, #4d9f0c, transparent);

与其他渐变相同，径向渐变是一个不固定尺寸的图片，譬如，它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。如需要填充容器的循环渐变，请使用CSS的repeating-radial-gradient 方法。因为<gradient>属于<image>类型，所以它可以用于任何适用于<image>的地方。正是因为这样，radial-gradient()不能用于 background-color 和其他属性比如<color>数据类型。

浏览器支持


IE9以上版本浏览器都支持`radial-gradient()`

语法：

radial-gradient(<position>| <shape>| <size>| <color-stop>| <linear-color-stop>| <color-hint>)

取值：

<position>：确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center。
- <percentage>：用百分比指定径向渐变圆心的横坐标值。可以为负值。
- <length>：用长度值指定径向渐变圆心的横坐标值。可以为负值。
- left：设置左边为径向渐变圆心的横坐标值。
- right：设置右边为径向渐变圆心的横坐标值。
- center：设置中间为径向渐变圆心的纵坐标值。
- bottom：设置底部为径向渐变圆心的纵坐标值。
<shape>：确定圆的类型。渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆。
- circle：指定圆形的径向渐变
- ellipse：指定椭圆形的径向渐变。
<size>：渐变的尺寸大小。包含的值见下表尺寸常数表
<color-stop>：表示某个确定位置的固定色值，包含一个值加上可选的位置值（相对虚拟渐变射线的或者长度值）。百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。其间的百分比值线性对应渐变射线上的点。

<extent-keyword>：关键字用于描述边缘轮廓的具体位置。以下为关键字常量：

常量	描述
`closest-side`	渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
`closest-corner`	渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
`farthest-side`	与closest-side相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
`farthest-corner`	渐变的边缘形状与容器距离渐变中心点最远的一个角相交。

<linear-color-stop>：色标的<color>值，后跟一个或两个可选的色标位置（沿渐变轴的<percentage>或<length>）。百分比 0%或长度 0代表渐变的中心；该值 100%表示最终形状与虚拟渐变射线的交点。两者之间的百分比值线性地位于渐变射线上。包括两个色标位置等同于在两个位置声明两个具有相同颜色的色标。
<color-hint>>：颜色提示是一种插值提示，用于定义渐变在相邻颜色停止点之间如何进行。长度定义了两种颜色之间的停止点，渐变颜色应达到颜色过渡的中点。如果省略，则颜色过渡的中点是两个色标之间的中点。

示例代码：

radial-gradient(circle,#f00,#ff0,#080);
radial-gradient(circleat center,#f00,#ff0,#080);
radial-gradient(circleat 50%,#f00,#ff0,#080);
radial-gradient(circlefarthest-corner,#f00,#ff0,#080);

<shape>和<size>使用注意：

错误代码：

radial-gradient(circle 50px 50px,#f00,#ff0,#080);

因为circle是正圆，一个值就能表示其直径长度，所以此时<size>只能是一个值。

错误代码：

radial-gradient(circle 50%,#f00,#ff0,#080);

circle不接受<size>的值是<percentage>。

不通过<shape>来表示圆和椭圆的方法：

以下2行代码都可以表示一个圆：

radial-gradient(100px,#f00,#ff0,#080);/*1*/
radial-gradient(100px 100px,#f00,#ff0,#080);/*2*/
radial-gradient(50px 100px,#f00,#ff0,#080);/*3*/

代码1：只给出100px，所以被当成是正圆的半径，于是就能确定一个直径为100px的圆；

代码2：给出了2个值，按理应该是要画一个椭圆的，但2个值相等，所以这个椭圆其实此时是个正圆形态。需要注意的是，代码2如果加上circle，那将是错误语法，因为这是2个值只有椭圆才接受；

代码3：表示了一个水平半径为50px，垂直半径为100px的椭圆

径向渐变是由中心向外渐变的。可以定义它中心(默认渐变是中心是center)、形状（原型或者椭圆形）、大小等。

语法：background: radial-gradient(center,size,start-color,last-color);

均匀渐变：

div{
width:400px;
height:200px;
background:-webkit-radial-gradient(red, yellow, green);    
}

效果如下：

radial-gradient圆形渐变实例图

以上是均匀渐变，也可以是非均匀渐变，改变渐变颜色的比例就行；还有重复渐变也是可以的。

对于ie6~ie9渐变兼容问题：

对于ie6~ie9是不支持渐变属性的，使用滤镜来代替渐变，实现渐变的效果。

filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='rgba(246,237,237,0)',endColorstr='rgba(246,237,237,0)');

其中：GradientType定义渐变的方式，属性值为"1"，表示水平方向上的渐变，属性值为"0"，表示垂直方向上的渐变。

CSS radial-gradient()函数创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。这个方法得到的是一个CSS<gradient>数据类型的对象。

径向渐变(Radial gradients)由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。径向渐变的中心点至边缘形状以及其延伸的部分，由连续缩放的若干同心轮廓组成，这个轮廓由设定的边缘形状决定。色值结束点用于设定虚拟渐变射线（virtual gradient ray）的变化方式，由中心点水平变化至右侧（如图）。色值结束点由百分比设定时，则是相对于终点为渐变射线与边缘形状相交点的渐变半径，渐变半径的终点位置即为100%。每个轮廓均为纯色，颜色由渐变射线上相应横切点所定义的颜色决定。

边缘形状只能为圆形或者椭圆形

与其他渐变相同，CSS径向渐变不属于CSS<color>数据类型，而是一个不固定尺寸的图片，譬如，它没有默认尺寸、比例。具体尺寸由它所定义的元素尺寸决定。

radial-gradient方法不允许循环渐变。如需要循环渐变，请使用CSS的repeating-radial-gradient方法。

实例

background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00ffff 0%, rgba(0, 0, 255, 0) 50%, #0000ff 95%);

470px 47px

background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #ffff80 20%, rgba(204, 153, 153, 0.4) 30%, #e6e6ff 60%);

farthest-corner

background-image: radial-gradient(farthest-corner at 45px 45px , #ff0000 0%, #0000ff 100%);

16px radius fuzzy circle

background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<style>
#grad1{
height:150px;
width:200px;
background:-webkit-radial-gradient(red,green,blue);/*safari5.1-6.0*/
background:-o-radial-gradient(red,green,blue);/*opera11.6-12.0*/
background:-moz-radial-gradient(red,green,blue);/*firefox3.6-15*/
background:radial-gradient(red,green,blue);/*标准的语法（必须放在最后）*/
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>

效果图：

以下实例演示了径向渐变-颜色结点不均匀分布:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:150px;
width:200px;
background:-webkit-radial-gradient(red5%,green15%,blue60%);/*safari5.1-6.0*/
background:-o-radial-gradient(red5%,green15%,blue60%);/*opera11.6-12.0*/
background:-moz-radial-gradient(red5%,green15%,blue60%);/*firefox3.6-15*/
background:radial-gradient(red5%,green15%,blue60%);/*标准的语法（必须放在最后）*/
}
</style>
</head>
<body>
<div id="grad1"></div>
</body>
</html>

效果图：

以下实例演示了径向渐变-圆形径向渐变:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1{
height:150px;
width:200px;
background:-webkit-radial-gradient(red,yellow,green);/*safari5.1-6.0*/
background:-o-radial-gradient(red,yellow,green);/*opera11.6-12.0*/
background:-moz-radial-gradient(red,yellow,green);/*firefox3.6-15*/
background:radial-gradient(red,yellow,green);/*标准的语法（必须放在最后）*/
}

#grad2{
height:150px;
width:200px;
background:-webkit-radial-gradient(circle,red,yellow,green);/*safari5.1-6.0*/
background:-o-radial-gradient(circle,red,yellow,green);/*opera11.6-12.0*/
background:-moz-radial-gradient(circle,red,yellow,green);/*firefox3.6-15*/
background:radial-gradient(circle,red,yellow,green);/*标准的语法（必须放在最后）*/
}
</style>
</head>
<body>
<p><strong>椭圆形ellipse（默认）：</strong></p>
<div id="grad1"></div>

<p><strong>圆形circle：</strong></p>
<div id="grad2"></div>
	
</body>
</html>

效果图：

以下实例演示了径向渐变-不同尺寸大小关键字的使用:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1{
height:150px;
width:150px;
background:-webkit-radial-gradient(60%55%,closest-side,blue,green,yellow,black);/*safari5.1-6.0*/
background:-o-radial-gradient(60%55%,closest-side,blue,green,yellow,black);/*opera11.6-12.0*/
background:-moz-radial-gradient(60%55%,closest-side,blue,green,yellow,black);/*firefox3.6-15*/
background:radial-gradient(60%55%,closest-side,blue,green,yellow,black);/*标准的语法（必须放在最后）*/
}

#grad2{
height:150px;
width:150px;
background:-webkit-radial-gradient(60%55%,farthest-side,blue,green,yellow,black);/*safari5.1-6.0*/
background:-o-radial-gradient(60%55%,farthest-side,blue,green,yellow,black);/*opera11.6-12.0*/
background:-moz-radial-gradient(60%55%,farthest-side,blue,green,yellow,black);/*firefox3.6-15*/
background:radial-gradient(60%55%,farthest-side,blue,green,yellow,black);/*标准的语法（必须放在最后）*/
}

#grad3{
height:150px;
width:150px;
background:-webkit-radial-gradient(60%55%,closest-corner,blue,green,yellow,black);/*safari5.1-6.0*/
background:-o-radial-gradient(60%55%,closest-corner,blue,green,yellow,black);/*opera11.6-12.0*/
background:-moz-radial-gradient(60%55%,closest-corner,blue,green,yellow,black);/*firefox3.6-15*/
background:radial-gradient(60%55%,closest-corner,blue,green,yellow,black);/*标准的语法（必须放在最后）*/
}

#grad4{
height:150px;
width:150px;
background:-webkit-radial-gradient(60%55%,farthest-corner,blue,green,yellow,black);/*safari5.1-6.0*/
background:-o-radial-gradient(60%55%,farthest-corner,blue,green,yellow,black);/*opera11.6-12.0*/
background:-moz-radial-gradient(60%55%,farthest-corner,blue,green,yellow,black);/*firefox3.6-15*/
background:radial-gradient(60%55%,farthest-corner,blue,green,yellow,black);/*标准的语法（必须放在最后）*/
}
</style>
</head>
<body>
<p><strong>closest-side：</strong></p>
<div id="grad1"></div>

<p><strong>farthest-side：</strong></p>
<div id="grad2"></div>

<p><strong>closest-corner：</strong></p>
<div id="grad3"></div>

<p><strong>farthest-corner（默认）：</strong></p>
<div id="grad4"></div>


</body>
</html>

效果图：