实现圆角边框渐变

站长
· 阅读数 8
第一开始用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>