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