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); }
效果如下:
以上是均匀渐变,也可以是非均匀渐变,改变渐变颜色的比例就行;还有重复渐变也是可以的。
对于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>
效果图: