边框线样式

1.双重边框线

div{
    outline-color: #2098F5;
    outline-style: double;
    outline-width: 1px;
    outline-offset: 7px;
    border:1px solid #2098F5;
}

效果图：

 2.渐变边框线     

　　转自：https://www.cnblogs.com/starryqian/p/9626309.html

/* border-image只能用于直角渐变 */    
div.first{
    float:left;
    border:3px solid #ccc;
    width:100px;
    height:50px;
    border-image:linear-gradient(to right,#000718,#23b7cb) 1 30;
}
/* 圆角渐变利用伪元素（元素的背景色需要设置，伪元素的层级比元素的低）*/    
div.second{
    float:left;
    margin-left:30px;
    border:1px solid #ccc;
    border-radius:30px;
    width:100px;
    height:50px;
    position: relative;
    background: #fff;
}
div.second::after{
    content:'';
    position: absolute;
    top: -3px; 
    bottom: -3px;
    left: -3px; 
    right: -3px;
    background: linear-gradient(135deg,#000781, #23b7cb);
    border-radius: 30px;
    z-index: -1;
}

效果图：

 

转载于:https://www.cnblogs.com/zsj-02-14/p/10136224.html