解决css中border渐变色和border-radius一起用border-radius失效的问题

我们都知道border-radius属性是实现边框圆角的，当我们给border设置渐变色的时候是用到border-image，会发现此时设置border-radius会失效。
失效的原因规范 W3C 解释如下：
A box’s backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element。

解决方法

• 利用伪元素after或before：元素overflow+相对定位+内边距+圆角， 伪元素绝对定位+渐变边框

    <div class="tei_one">
         <p>云资料软件</p>
         <p>操作技巧</p>
    </div>

.tei_one{
    position: relative;
    width: 2.16rem;
    height: 1.32rem;
    border-radius: 0.18rem;
    margin: 0 0.21rem 0.24rem 0;
    padding-top: 0.29rem;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(0deg, #898DFC, #3F47F5);
}
.tei_one::before{
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 3px solid;
    box-sizing: border-box;
    border-image: linear-gradient(0deg, #7A7CF6, #242EE0) 3 3;
}

效果如图

完结~~