前言
一直对渐变背景这块比较感兴趣，但是因为每天加班实在太忙了，任务也比较多。所以就只能下班的时间研究渐变背景这方面的知识，一来满足了自己的好奇心，二来可以更加了解这方面的知识。跟更多不断学习的小伙伴们一起进步，一起汲取新的知识。不断成长，不断精进自己的知识。有想一起讨论技术，一起成长的伙伴们，也可以加微信一起交流。各微信群里面，有很多前端领域的大佬，在他们身上学到了很多，今后也努力向他们看齐。不断提升自己。加油。
CSS radial-gradient() 函数
定义与用法
radial-gradient() CSS函数创建了一个图像。
该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。
形状可以是圆形（circle）或椭圆形（ellipse）。
与其它渐变相同，径向渐变是一个不固定尺寸的图像，即，它没有首选的大小，也没有首选的比例。具体大小将由它所应用的元素的大小决定。
例如：
1.双色圆形渐变
background: radial-gradient(#e66465, #9198e5);
2.closest-side
渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
background: radial-gradient(closest-side, #3f87a6, #ebf8e1, #f69d3c);
3.cicle圆形渐变
background: radial-gradient(circle at 100%, #333, #333 50%, #eee 75%, #333 75%);
4.ellipse椭圆形
radial gradient 的组成
【解释】：
- 径向渐变由其中心点、边缘形状轮廓、两个或多个色值结束点定义而成。
- 为了创建平滑的渐变，径向渐变函数绘制了一系列从中心点放射到边缘形状（甚至可能超出范围）的同心轮廓。
- 边缘形状可以是圆形（circle）或椭圆形（ellipse）。
- 色彩结束点位于虚拟渐变射线上，该渐变射线从中心点水平向右延伸。
- 基于百分比的色彩结束位置是相对于边缘形状和此渐变射线之间的交点（代表100％）。
- 每个形状都是一种单色，并由其相交的渐变射线上的颜色确定。
基本语法：
radial-gradient([[<shape>||<size>]?[at <position>,]?<color-stop>[,<color-stop>]+)
eg:radial-gradient(circle at center, red 0, blue, green 100%)
【注意】：gradient属于image类型，所以它可以用于任何适用于image的地方。不能用于 background-color 和其他属性比如color数据类型。
可配置参数
| 参数 | 解释 |
|---|---|
| position | 与background-position或者transform-origin类似。如没有设置，默认为中心点。 |
| shape | 渐变的形状。圆形（渐变的形状是一个半径不变的正圆）或椭圆形（轴对称椭圆）。默认值为椭圆 |
| size | 渐变的尺寸大小 |
| color-stop | 表示某个确定位置的固定色值，包含一个color值加上可选的位置值（相对虚拟渐变射线的percentage或者length长度值）。 百分比值0%，或者长度值0，表示渐变中心点；百分比值100%表示渐变射线与边缘形状相交的点。 其间的百分比值线性对应渐变射线上的点。 |
| extent-keyword | 关键字用于描述边缘轮廓的具体位置。 |
参考资料MND-linear-gradient()：linear-gradient
径向渐变演示
- x轴:left: 0% center: 50% right: 100%
- y轴