css 如何實(shí)現(xiàn)邊框 徑向漸變

border-image實(shí)現(xiàn)，要圓角的話還要嵌套一層標(biāo)簽

       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>

使用border是無法實(shí)現(xiàn)漸變的，可以使用背景來實(shí)現(xiàn)，button外面再套一層結(jié)構(gòu)，用漸變背景，同時(shí)加上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;
    ...
}