CSS: liner-gradient radial-gradient

background-image: linear-gradient(45deg, blue 100px, red, green);

background-image: repeating-linear-gradient(red 50px, yellow 100px);

background-image: radial-gradient(red, blue);

圆心大小

background-image: radial-gradient(50px 50px, red, blue);

椭圆

background-image: radial-gradient(50px 100px, red, blue);

指定圆心

background-image: radial-gradient(100px 100px at 0 0, red, blue);

    div {
      width: 400px;
      height: 200px;
      background-image: radial-gradient(closest-side at 100px 100px, red, blue);
    }

    div {
      width: 400px;
      height: 200px;
      background-image: radial-gradient(farthest-side at 100px 100px, red, blue);
    }

    div {
      width: 400px;
      height: 200px;
      background-image: radial-gradient(farthest-corner at 100px 100px, red, blue);
    }