CSS3 radial-gradient 径向渐变demo效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      display: inline-block;
      width: 200px;
      height: 200px;
      margin: 30px auto;
      text-align: center;
      line-height: 200px;
      color: #ccc;
      font-size: 50px;
      border: 1px solid #000;
    }
    /* 
        径向渐变
        radial-gradient: 中心位置，起始颜色，终止颜色
        radial-gradient: 辐射半径 中心位置，起始颜色，终止颜色
        中心位置：at left right center bottom top
     */
     div:nth-child(1) {
       background-image: radial-gradient(at left top, red, green);
     }
     div:nth-child(2) {
       background-image: radial-gradient(at 50px 50px, red, green);
     }
     div:nth-child(3) {
       background-image: radial-gradient(at center, red, green);
     }
     /* 辐射半径 */
     div:nth-child(4) {
       background-image: radial-gradient(50px at center, red, green);
     }
     div:nth-child(5) {
       background-image: radial-gradient(50px at 100px 100px, 
       red, green, yellow, blue, orange);
     }
     div:nth-child(6) {
      border-radius: 100%;
      border: none;
      background-image: radial-gradient(150px at 50px 50px, #fff, #0ff);
     }
     div:nth-child(7) {
       background-image: radial-gradient(50px at 100px 100px, 
       red 0%,
       red 25%,
       green 25%,
       green 50%,
       yellow 50%,
       yellow 75%,
       blue 75%,
       blue 100%);
     }
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</body>
</html>
demo 效果