渐变背景

html

<div class="backcolor">
    <div class="color1"></div>
    <div class="color2"></div>
    <div class="color3"></div>
    <div class="color4"></div>
    <div class="color5"></div>
    <div class="color6"></div>
    <div class="color7"></div>
    <div class="color8"></div>
</div>

css

    div.backcolor .color1{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
        background-image: linear-gradient(45deg,red,blue,yellow); //线性渐变
    }
    div.backcolor .color2{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
        background-image: linear-gradient(135deg,red 25%,yellow 39%,blue);
    }
    div.backcolor .color3{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
        background-image: radial-gradient(farthest-corner,red,yellow,white);//经向渐变
    }
    div.backcolor .color4{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
        background-image: radial-gradient(closest-corner,blue,yellow,red);
    }
    div.backcolor .color5{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
        /*background-repeat: no-repeat;*/
      //重复线性渐变
        background-image: -webkit-repeating-linear-gradient(45deg,red 5%,yellow 10%,blue 15%);
    }
    div.backcolor .color6{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
        background-image: -webkit-repeating-linear-gradient(135deg,red 0px,red 10px,yellow 10px,yellow 20px,blue 20px,blue 30px);
    }
    div.backcolor .color7{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid red;
  //重复径向渐变
        background-image: -webkit-radial-gradient(bottom right, circle, red, yellow, blue);
    }
    div.backcolor .color8{
        margin: 0 10px;
        width: 200px;
        height: 200px;
        border:1px solid blue;
        background-size: 40px 40px;
        background-image: linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%),
        linear-gradient(135deg,red 25%,transparent 25%,transparent 75%,red 75%);
    }