likes
comments
collection

实现圆角边框渐变

作者站长头像
站长
· 阅读数 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>

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