径向渐变

CSS 属性 background-image 可以用 radial-gradient() 函数创建径向渐变背景图
径向渐变是指由中心向四周的渐变
径向渐变 (Radial gradients) 是由渐变形状，渐变大小、中心点、两个或多个色值结束点（color stops）**定义而成。

background-image: radial-gradient(
  /*shap 渐变形状  size 渐变半径大小  at position 渐变中心点*/ shape size at
    position,
  /* 渐变起始色 */ start-color,
  /* 中间还可以定义多个颜色 */...,
  /* 渐变结束色 */ end-color
);

position

<style>
  .box {
    width: 200px;
    height: 100px;
    margin: 0px 2px;
    float: left;
    color: #fff;
  }
  .box1 {
    /*
            at 100px 100px代表径向渐变的中心点
            red代表红色
            yellow 代表黄色
            blue代表蓝色
        */
    background-image: radial-gradient(at 100px 100px, red, yellow, blue);
  }
</style>
<body>
  <div class="box box1"></div>
</body>

size

值	描述
farthest-corner	(默认) : 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
closest-side	（圆形）渐变的边缘形状与容器距离渐变中心点最近的一边相切<br/>（椭圆）距离渐变中心点最近的垂直和水平边相切。
closest-corner	渐变的边缘形状与容器距离渐变中心点最近的一个角相交(水平与垂直边相交)。
farthest-side	与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。

指定渐变的半径

<style>
  .box {
    width: 300px;
    height: 300px;
    float: left;
  }
  .circle {
    background-image: radial-gradient(
      circle 50px,
      red,
      yellow,
      blue 100%,
      transparent 100%
    );
  }
  .ellipse {
    background-image: radial-gradient(
      ellipse 100px 50px,
      red,
      yellow,
      blue 100%,
      transparent 100%
    );
  }
</style>
<body>
  <div class="box circle"></div>
  <div class="box ellipse"></div>
</body>

彩虹

<style>
  .rainbow {
    width: 600px;
    height: 300px;
    border: 1px solid red;
    /*  径向渐变
      圆形渐变  最远边相切 圆心在底部中心 
     */
    background-image: radial-gradient(
      circle farthest-side at bottom center,
      white 40%,
      pink 50%,
      pink 55%,
      red 60%,
      red 65%,
      orange 70%,
      orange 75%,
      skyblue 80%,
      skyblue 85%,
      yellow 90%,
      yellow 95%,
      white 95%
    );
  }
</style>

<body>
  <div class="rainbow"></div>
</body>

毛毛球

<style>
  body {
    background-color: #000;
  }
  .ball {
    width: 100px;
    height: 100px;
    background-image: radial-gradient(yellow 5%, transparent 60%, transparent);
  }
</style>
<div class="ball"></div>

发光按钮

<style>
  body {
    background-color: #000;
  }
  .glow-btn {
    width: 120px;
    height: 40px;
    border-radius: 8px;
    color: white;
    text-align: center;
    line-height: 40px;
    background-color: #4d89b9; /* 按扭背景色 */
    /* 径向渐变  圆形渐变 圆心位于为元素水平 50%  垂直0% 的位置*/
    background-image: radial-gradient(
      circle at 50% 0%,
      rgba(255, 255, 255, 0.4),
      /* 超始颜色色 */ transparent 70% /* 结束颜色为透明*/
    );
  }
</style>
<div class="glow-btn">发光按扭</div>

形状大小位置,颜色

css学习