CSS3中的径向渐变

径向渐变（radial-gradient）
径向渐变指从一个中心点开始沿着四周产生渐变效果。由其中心点、边缘形状轮廓及位置、色值结束点（color stops）定义而成。

当我们为一个渐变设置多个颜色时，它们会平分这个100%的区域来渐变。当然除了百分比，我们也可以使用具体的像素来设置这个大小。像素设置的大小指的是从渐变圆心向外延伸的距离。

径向渐变语法：

<radial-gradient> = radial-gradient([ [<shape> || <size>] [ at <position> ]? ,
| at <position>, ]?<color>[stop]?[ ,<color>[stop]?]+)

其中各种属性的意思如下：

// 圆心位置
<position> = [ <length> | <percentage> | left | center | right ]? [ <length> | 
<percentage> | top | center | bottom ]?  //默认处于中心点
// 渐变形状
<shape> = circle | ellipse  //默认是ellipse
// 渐变大小
<size> = <extent-keyword> | [ <circle-size> || <ellipse-size>]
<extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner
<circle-size> = <length>
<ellipse-size> = [ <length> | <percentage> ]{2}
<shape-size> = <length> | <percentage>
// 渐变颜色及颜色位置
<color>[stop]? = <color> [ <length> | <percentage> ]?

上面需要详细讲明一下

我们在渐变定义时可以直接定义渐变的形状，但除了这种方式，还可以通过为size传入具体值在确定渐变形状，具体说明如下：

1、当传入一个大小参数size或者两个相同值得size时，则表示该渐变形状是圆。

background: radial-gradient(60px,#f00 0,#ff0 100%);

2、当传入两个大小不同的size参数时，则表示该渐变形状为椭圆。

background: radial-gradient(100px 60px,#f00 0,#ff0 100%);

当然，我们也可以在声明渐变形状的同时在其后紧跟渐变大小，中间用空格隔开，效果与上面相同，例如

background: radial-gradient(circle 60px,#f00 0,#ff0 100%);
background: radial-gradient(ellipse 100px 60px,#f00 0,#ff0 100%);

需要特别注意的是，若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数，个人认为或许是因为圆形半径若为百分数的话就无法确定是以元素的宽为标准还是以高为标准了。

上面定义size除了给定具体值或使用百分比之外，还可以使用extent-keyword，extent-keyword的值有如下四个：

closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

下面就以closet-side为例

background: radial-gradient(circle closest-side at 100px 100px,#f00 0,#ff0 100%);

可以看到渐变圆与容器最近的边相切，其余三个值也同理如上。

除了size需要注意之外，position也需要简单说明一下。

position用于定义渐变形状圆形位置，它的值可以使具体值，百分比或方位值（left、right、top、bottom、left top、top right、bottom left、bottom right），这里主要说一下几个注意点。

1、当在position缺省的额情况下，默认渐变形状处于容器的中心点。

2、当为position只给定一个具体值或百分比时，则其表示在水平方向上所处位置，而垂直方向上默认为50%，如下。

background: radial-gradient(circle 60px at 70px,#f00 0,#ff0 100%);

3、当为position只给定一个方位时，则表示圆心在该方位方向上的值为0,而与其垂直的方向上则默认50%，如下。

background: radial-gradient(circle 60px at left,#f00 0,#ff0 100%);

除上面要注意的之外，还需要注意如果size是 extent-keyword中的closest-side或closest-corner时，则position不能是方位值，因为方位值默认在一个或两个方向得我位置为0（例如left水平方向为0，left top 水平垂直方向上为0），所以不存在最近边或角相切的情况，当然设置具体值为0或百分比为0%时也要注意这种情况。

background: radial-gradient(circle closest-side at 0px 50px,#f00 0,#ff0 100%);

可以看到上面没呈现出任何效果。

 
————————————————————————————

版权声明：本文为博主[葉無聞]原创文章，如有侵权请联系删除。
本文链接：https://blog.csdn.net/HU_YEWEN/article/details/90604792