【转】CSS3 渐变背景 radialgradient() webkitradialgradient() webkitgradient() mozradialgradient() oradialgradient() msradialgradient()

语法:

<radial-gradient>:radial-gradient([ <position>,]? [ [ <shape> || <size> ] | <shape-size>{2},]? <color-stop>[, <color-stop>]+);

<position>:[ <length>① | <percentage>① | left | center① | right ]? [ <length>② | <percentage>② | top | center② | bottom ]?

<shape>:circle | ellipse

<size>:closest-side | closest-corner | farthest-side | farthest-corner | contain | cover

<shape-size>:<length> | <percentage> 

<color-stop>:<color> [ <length> | <percentage> ]?

 

 


取值:

 


<position>
<percentage>①:
用百分比指定径向渐变圆心的横坐标值。可以为负值。
<length>①:
用长度值指定径向渐变圆心的横坐标值。可以为负值。
left:
设置左边为径向渐变圆心的横坐标值。
center①:
设置中间为径向渐变圆心的横坐标值。
right:
设置右边为径向渐变圆心的横坐标值。
<percentage>②:
用百分比指定径向渐变圆心的纵坐标值。可以为负值。
<length>②:
用长度值指定径向渐变圆心的纵坐标值。可以为负值。
top:
设置顶部为径向渐变圆心的纵坐标值。
center②:
设置中间为径向渐变圆心的纵坐标值。
bottom:
设置底部为径向渐变圆心的纵坐标值。
<color-stop>:
指定渐变的起止颜色。
<shape>
circle:
指定圆形的径向渐变
ellipse:
指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值
<size>
closest-side:
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner:
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side:
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner:
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain:
包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover:
覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner
<shape-size>
写本文档时Firefox尚不支持<shape-size> 
<percentage>:
用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<length>:
用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。
<color-stop>
<color>:
指定颜色。请参阅颜色值
<length>:
用长度值指定起止色位置。不允许负值
<percentage>:
用百分比指定起止色位置。

 

 

写法:

 

内核类型                       写法
Webkit(Chrome/Safari)    -webkit-radial-gradient()/-webkit-gradient()
Gecko(Firefox)           -moz-radial-gradient()
Presto(Opera)            -o-radial-gradient()
Trident(IE)              -ms-radial-gradient()
W3C                      radial-gradient()

 

实例:

 

.test{

    background:-moz-radial-gradient(center center,circle,#f00,#ff0,#080);

    background:-webkit-radial-gradient(center center,circle,#f00,#ff0,#080);

    background:-o-radial-gradient(center center,circle,#f00,#ff0,#080);

    background:-ms-radial-gradient(center center,circle,#f00,#ff0,#080);

    background:radial-gradient(center center,circle,#f00,#ff0,#080);

}

图1

 


.test{

    background:-moz-radial-gradient(circle contain,#f00,#ff0,#080);

    background:-webkit-radial-gradient(circle contain,#f00,#ff0,#080);

    background:-o-radial-gradient(circle contain,#f00,#ff0,#080);

    background:-ms-radial-gradient(circle contain,#f00,#ff0,#080);

    background:radial-gradient(circle contain,#f00,#ff0,#080);

}

 

图2


.test{

    background:-moz-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

    background:-webkit-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

    background:-o-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

    background:-ms-radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

    background:radial-gradient(left top,cover,#f00 20%,#ff0 50%,#080 80%);

}

图3

 

 


.test{

    background:-moz-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

    background:-webkit-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

    background:-o-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

    background:-ms-radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

    background:radial-gradient(90% 50px,closest-side,#f00,#ff0,#080);

}

图4

 

 

 

 

 

 

 

 

 

#header,.mySearch,#ad_under_post_holder,#ad_text_under_commentbox,#site_nav_under{
display:none;
}
.akishimo{
margin-top:20px;
float:left;
}
.flag{
margin-top:15px;
float:left;

}
.day{
900px;
margin:auto;
}
.post,#comment_form_container{
900px;
margin:auto;
}

原文地址:https://www.cnblogs.com/Akishimo/p/2840999.html