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);
    }