第一开始用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...