CSS3 linear-gradient（四）

语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

background: linear-gradient(top, #fff, #000);

 

可以写多个颜色

background:-webkit-linear-gradient(left, #ace, #f96 5%, #ace, #f96 95%, #ace);

.div1{
      width: 100px;
      height: 50px;
      background:-webkit-linear-gradient(top,  #faa51a,  #f47a20);;
      color: #fef4e9;
      border: solid 1px #da7c0c;
      background: #f78d1d;
    }
    .div1:hover{
      background: -webkit-linear-gradient(top,  #f88e11,  #f06015);
    }
    .div1:active{
      background: -webkit-linear-gradient(top,  #f47a20,  #faa51a);
    }

 

 

1像素在app显示过大可以通过

    div {
      width: 100%;
      height: 30px;
      /* border-bottom: 1px solid #e6e6e6; */
      background-color: #fff;
      /*position: relative;*/
    }
    .line{
      border: none;
      background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#e6e6e6),color-stop(50%,#e6e6e6),color-stop(50%,transparent));
      background-image: -webkit-linear-gradient(top,#e6e6e6 0,#e6e6e6 50%,transparent 50%);
      background-image: linear-gradient(to bottom,#e6e6e6 0,#e6e6e6 50%,transparent 50%);
      -webkit-background-size: 100% 1px;
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: bottom;
    }