• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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>数据类型。

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    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>

    效果图:

    上篇:linear-gradient()

    下篇:<gradient>