直角渐变色

border-image: -webkit-linear-gradient(red,yellow) 30 30;
border-image: -moz-linear-gradient(red,yellow) 30 30;
border-image: linear-gradient(red,yellow) 30 30; 

圆角渐变色(border-image无法对圆角设置渐变,方式为在内部在建一个div以父级padding边长作为渐变)

.div1{
    padding: 2px;
    border-radius: 27px;
    overflow: hidden;
    background-image: -webkit-linear-gradient(top, #eaa143 0%, #efba89 50%, #ffee67 90%);
    background-image: -moz-linear-gradient(top, #eaa143 0%, #efba89 50%, #ffee67 90%);
    background-image: linear-gradient(top, #eaa143 0%, #efba89 50%, #ffee67 90%);
}
.div2{
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 27px;
}