css线形渐变色or径向渐变

渐变色的属性是background-imgas用背景属性实现：

所用的属性值是linear-gradient()或repeating-linear-gradient()

linear-gradient(to 渐变的方向up(从上至下)/bottom(从下至上) 第一个颜色，第二个颜色，···(可放多个颜色))

以下是创建一个条纹背景

div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
/* 
第一个属性是角度45度，第二个是在0px的时候是黄色，第三个是40px也是黄色，
合在一起是从0px到40px是黄色，后面的就好理解了，从40px到80px是黑色 
*/
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }

效果如下：

径向渐变：

background-image: radial-gradient(颜色, 颜色); 
/* 默认圆心为div中心，默认形状为椭圆 */
background-image: radial-gradient(形状, 颜色, 颜色); 
/* circle表示圆形，ellipse表示椭圆 */
background-image: radial-gradient(at x y, 颜色, 颜色);
 /* x和y是圆心的x和y */
background-image: radial-gradient(形状 at x y, 颜色, 颜色); 
/* x和y是圆心的x和y */
background-image: radial-gradient(大小 形状 at x y, 颜色, 颜色); 
/* 大小用几个关键字表示 */
/*
    最近的边作为大小：closest-side
    最近的角：closest-corner
    最远的边：farthest-side
    最远的角：farthest-corner
*/
background-image: repeating-radial-gradient(颜色 百分比, 颜色 百分比); 
/* 默认圆心为div中心，默认形状为椭圆 */

当然我们一般不用background属性来设置都是background-imgas来设置，因为可能会出现跟你后面设置的背景其他的的属性值出现冲突。