关于css:实现圆角边框渐变

第一开始用 border-image 实现边框突变色彩，然而 border-radius 就生效了。前面在网上找了一个比拟好的办法来解决这个问题。

首先先写一个父元素，实现背景色彩突变

.switch-button{
    width: 168rpx;
    height: 50rpx;
    background-image: linear-gradient(to left, #F14D4D, #CC0D0D);
    border-radius: 25rpx;
    box-sizing: border-box;
    padding: 6rpx;
}

留神要是设置 padding，大小和你的边框是一样大的。而后就能够用子元素遮住实现圆角渐变色边框了。

.button-content{
    width: 100%;
    height: 100%;
    border-radius: 25rpx;
    background-color: #313131;
}

整体 html

<view class="switch-button">
    <view class="button-content"></view>
</view>

链接 https://blog.csdn.net/GongWei…