3. 径向渐变

径向渐变

径向渐变 从一个中心点开始沿着四周产生渐变效果

语法: background: radial-gradient((shape? size? (at position?))?, start-color, ..., last-color) ? 表示可省略

shape 渐变形状 : circle | ellipse(椭圆)

size 渐变大小:

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

也可指定大小: 需要注意的是 若渐变形状为圆形，则该渐变大小只能设置一个数且不能为百分数，而椭圆既可以为具体数值也可以为百分数

注意: 只传一个值默认形状为圆形,传入的是半径大小,不能为百分比;

传两个值则代表形状为椭圆形,第一个是x轴半径,第二个是y轴半径

圆心位置参数一定要置于radial-gradient()第一个参数的末尾，顺序千万不能放反了

.d1{
     width: 400px;
     height: 200px;
     border: 1px solid #333;
     /* 指定形状   指定大小半径   指定中心点   指定颜色 */
     /* background-image: radial-gradient(circle 50px at center,red,green,blue); */
     background-image: radial-gradient(ellipse 100px 50px at center,red,green,blue);
   }

.d2{
     width: 400px;
     height: 200px;
     margin-top: 50px;
     /*指定大小:  可以支持具体像素 ,也可以 使用关键词  */
     background-image: radial-gradient(circle closest-side at center,red,green );
   }

 /* 中心点位置  */
.d3{
     width: 400px;
     height: 200px;
     margin-top: 50px;
     /* 可以使用 像素和 百分数 */
     /* 左到右: 0%-- 100% */
     /* 上到下: 0%---100%  */
     /* background-image: radial-gradient(circle 50px at 10% 20% ,red,green ); */
     /* 具体像素 距离左边  距离 上边 分别 是多远 */
     background-image: radial-gradient(circle 50px at 40px 40px ,red,green );
   }

.d4{
     width: 400px;
     height: 200px;
     margin-top: 50px;
     background-image: repeating-radial-gradient(circle 50px at center ,red,green );
   }

<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>

重复渐变 : background: repeating-radial-gradient(circle at center,#f00 0,#f00 10%,#ff0 10%,#ff0 20%);

可简写为:background: repeating-radial-gradient(circle at center,#f00 0 10%,#ff0 10% 20%);