当前位置: 首页 > Web前端 > HTML

实现圆角边框渐变

时间:2023-03-28 13:52:07 HTML

最开始使用border-image实现边框渐变色,但是border-radius无效。后来在网上找到了解决这个问题的比较好的方法。先写一个父元素实现背景色渐变。开关按钮{宽度:168rpx;高度:50rpx;背景图像:线性渐变(向左,#F14D4D,#CC0D0D);边界半径:25rpx;box-sizing:border-box;padding:6rpx;}请注意,如果您设置了填充,则其大小与您的边框相同。然后你可以用子元素覆盖它来实现圆角渐变边框。.button-content{宽度:100%;高度:100%;边界半径:25rpx;background-color:#313131;}整体html链接https://blog.csdn.net/GongWei...