linear-gradient ： 线性渐变

  1. #grad {
  2. 从左开始见渐变 渐变颜色最少需要两种
  3.   background-image: linear-gradient(to right, red , blue);
  4. }

可以使用to加方位词 也可以使用角度 方位词 一次可是使用两个，例如 to left top , to top right

  1. background-image: linear-gradient(to right, rgb(6, 240, 6)200px, rgb(12, 12, 12)250px,rgb(235, 11, 149)500px);
  2. /*绿色   此处200px是绿色结束位置 ， 黑色 黑色到250px位置结束 ， 粉色 粉色到500px位置结束，如果最后一个不写结束位置，那么它会占据到剩余的位置

repeating-linear-gradient()：重复性线性渐变

其值线性渐变的参数一样，只不过是规定颜色的宽度之后重复

  1.             background-image: repeating-linear-gradient(-45deg,
  2.                     transparent 20px,
  3.                     transparent 25px,
  4.                     green 25px,
  5.                     green 30px,
  6.                     rgba(0, 0, 0, 1) 30px,
  7.                     rgba(0, 0, 0, 1) 50px);
  8.             ;

radial-gradient()：放射性渐变

第一个参数 圆的形状 ellipse 椭圆 circle 正圆
第二个参数 边缘轮廓的结束位置 有四个值 closest-side最近的边， closest-corner最近的角，farthest-side最远的边 ，farthest-corner 最远的角
第三个参数 圆心的位置 at + 圆心的位置
第四个参数 颜色值以及结束的位置

  1. background: radial-gradient(circle closest-side at center,  #333 50%, #eee 75%, #333 75%);

repeating-radial-gradient()：重复性放射渐变

其值与放射性渐变的参数一样，只不过是规定颜色的宽度之后重复

  1. background-image: repeating-radial-gradient(circle closest-side at center,  #333 50%, #eee 75%, #333 75%);
  2. // 当设置圆环样式时，应设置    浅色与深色的色差不太大，不可一白一黑，会导致最终出来的效果不符合预期
  3. background-image: repeating-radial-gradient(circle at center, #333, #000 1%);