H5新特性 边框渐变

  样式1{
    float:left;
    margin:50px;
    width:250px;
    height:250px;
    box-sizing:border-box;
    border:20px solid transparent;
    background-clip:padding-box,border-box;
    background-origin:padding-box,border-box;
    background-image:linear-gradient(#fff,#fff),linear-gradient(#5c5fa5,#893f60);
}
样式2 {
    margin:50px;
    float:left;
    width:250px;
    height:250px;
    box-sizing:border-box;
    border:20px solid transparent;
    background-clip:padding-box,border-box;
    background-origin:padding-box,border-box;
    background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#5c5fa5,#893f60);
}
样式3{
    float:left;
    position:relative;
    width:250px;
    height:250px;
    margin:50px;
    box-sizing:border-box;
    border:20px solid transparent;
    background-clip:padding-box,border-box;
    background-origin:padding-box,border-box;
    background-image:linear-gradient(45deg,#fff,#fff),linear-gradient(45deg,#5c5fa5,#893f60);
}

转载于:https://my.oschina.net/u/3227287/blog/1571556