radial-gradient介绍

radial-gradient能够创建一个图像，从中心点或特定点开始以圆形方式向外扩展通过两个或多个颜色点的渐变形成一个径向渐变图像。

radial-gradient语法

background:radial-gradient(radial,color-stop1,color-stop2,...);

radial-gradient语法参数详解

radial-gradient写法有下面几种形式

1，

radial-gradient(circel radius,color-stop,...);

.linear-cont{
    height:300px;
    background:radial-gradient(circle 20px,#D62121,#107475);
}

效果如下：

circle表示是一个圆形渐变，radius表示圆形的半径大小，后面的两个color-stop表示两个渐变的颜色，color-stop可以多个。

2，

radial-gradient(circle percent at x y,color-stop,...);

.linear-cont{
    height:300px;
    background:radial-gradient(circle 20px at 50px 80px,#D62121,#107475);
}

效果如下：

"circle 20px  at 50px 80px"中的“at 50px 80px”用来设置渐变起始点的位置。对比前面的没有"at x y"红色圆形的位置的有很大不同，没有设置“at x y”的时候默认为“center”。

3，

radial-gradient(circle,#D62121 20%,#107475 40%,#D62121 60%);

.linear-cont{
    height:300px;
    background:radial-gradient(circle,#D62121 20%,#107475 40%,#D62121 60%);
}

效果如下：

这个用法中的color-stop有两个参数"color length",其中的length值可以是“px”，“%”等单位，表示颜色渐变的开始位置。

4，

radial-gradient(circle <extent-keyword>,color-stop,...);

.linear-cont{
    height:300px;
    background:radial-gradient(circle closest-side,#D62121 20%,#107475 40%,#D62121 60%);
}

效果如下：

extend-keyword是一个枚举值，表示径向渐变的结束方式，有以下几个值：

.linear-cont{
    height:200px;
    background:radial-gradient(circle closest-side,#D62121,#107475,#D62121);
}

@1，closest-side:效果

@2，closest-corner效果

@3，farthest-side效果：

@4,fathest-corner效果：

4个结束位置的枚举值，都是表示结束位置到什么位置，farthest-corner要比farthest-side位置要远，closest-corner和farthest-corner距离是一样的。

extent-keyword属性前面不能跟半径大小值一起用，加上extent-keyword就不能使用radius属性，它两个是互斥的。

4，

radial-gradient(ellipse 20% 40% at left center,color-stop,...);

.linear-cont{
    height:300px;
    background:radial-gradient(ellipse 60% 40% at left center,#D62121,#107475 ,#D62121);
}

效果如下：

5，

.linear-cont{
    height:300px;
    background:radial-gradient(ellipse closest-side at center,#D62121,#107475 ,#D62121);
}

效果如下：

radial-gradient总结

circle和ellipse都可以有半径值

radial-gradient(circle 20px,color-stop,...);
radial-gradient(ellipse 20px 40px,color-stop,...);

circle的半径值是一个，ellipse有两个半径值，一个横向半径，一个纵向半径（对于椭圆不理解的，该去补补高中几何去了）。

无论是circle还是ellipse，半径值和extent-keyword是互斥的，两个不能同时出现，extent-keyword的意思是渐变结束的位置，也是表示渐变形状的半径大小，和数值半径是相同意思，你可以办extent-keyword看成是半径值的几个枚举值。

color-stop是颜色和渐变开始位置两个值组成的，渐变位置值可选填，跟linear-gradient和repeating-linear-gradient中的color-stop的用法是一致的。

radial-gradient语法中的radial参数中的值的位置是不能错乱的，下面把所有位置顺序列一下：

circle/ellipse + radius/extent-keywrod + at position，color length,color length,...

最后再提一点，对于radial-gradient使用时一定要加上前缀，才能有良好的兼容性“-webkit”,"-moz","-o","-ms"。radial参数可以省略，省略时默认为“ellipse”。