css3渐变练习个属性理解

径向渐变：radial-gradient(形状 | 渐变半径的参考边、角 | at 径变的中心，[径变颜色 | 经变半径]?);

1)、形状： 圆形 circle 、椭圆 ellipse

2)、参考 边、角

　　

closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain：
包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover：
覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner

 

3)、渐变中心 (就是圆心点) 写法： at center 、at left、at right、 at 100px 等形式

4)、经变半径(就是颜色经变的半径 包裹层的宽度 以实色填充)

 

下面看个例子：

<style>
.circle{
    width: 200px;
    height: 200px;
    border-radius: 100px;
    background: radial-gradient(circle closest-side at center ,red 0px,transparent 50px,yellow 10px);
}
</style>
<div class="circle">
    
</div>

效果图：

需要注意点：

经变颜色，是有叠加效果的，最里层颜色会覆盖最外层，当设置里层为透明时，可以看出经变的原理；这个是自己当初不理解的原因！