css 如何实现边框 径向渐变

Question

这里的边框颜色要求

Answer 1

使用border是无法实现渐变的，可以使用背景来实现，button外面再套一层结构，用渐变背景，同时加上padding，button本身用白色背景，具体代码如下：

<div class="btn"><a href="#" title="了解更多">了解更多</a></div>
.btn{
    width: 100px;
    height: 40px;
    padding: 2px;
    background-image:-webkit-linear-gradient(60deg, #15d5be, #18c8cc); 
    background-image:linear-gradient(60deg, #15d5be, #18c8cc);
    ...
}
.btn a {
    display: block;
    height: 36px;
    background-color: #fff;
    ...
}

Answer 2

border-image实现，要圆角的话还要嵌套一层标签

       button{
        background: #ffffff;
        outline: none;
        width: 100px;
        height: 36px;
        border: none;
        border-radius: 14px;
        overflow: hidden;     
        cursor: pointer;
       }
       button span{
           height: 100%;
           width: 100%;
           display: block;
           border: 2px solid transparent;
           border-image: linear-gradient(60deg, #16d5be , #18c8cc) 2;
           box-sizing: border-box;
           line-height: 32px;
           color: #16d5be;
       }
       
         <button><span>了解更多</span></button>