小程序
小游戏
企业微信
微信支付
扫描小程序码分享
button的边框如何渐变加圆角？
6 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
这个方案可以实现，看的懂不，为了清晰点，我把css都写在标签里面了。就是在button外面套一个渐变背景的view，然后边框宽度就是外层view的宽高减去内层button的宽高。圆角border-radious在view和button里都要写。亲测有效的
<view style="width: 305rpx;height: 305rpx; border-radius: 50rpx; background: linear-gradient(to right, red , yellow);" > <button style="width: 300rpx;height: 300rpx; background: white; border-radius: 50rpx;">点我</button> </view>
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
直接清除自带的，自己重新写
来个代码片段
.button {
width: 96rpx;
height: 58rpx;
border: 2rpx solid;
text-align: center;
line-height: 58rpx;
border-image: linear-gradient(315deg, rgba(73, 126, 247, 1), rgba(183, 88, 248, 1)) 2 2;
}
https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
目前可以实现边框渐变，但是不能圆角
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
这个方案可以实现，看的懂不，为了清晰点，我把css都写在标签里面了。就是在button外面套一个渐变背景的view，然后边框宽度就是外层view的宽高减去内层button的宽高。圆角border-radious在view和button里都要写。亲测有效的
<view style="width: 305rpx;height: 305rpx; border-radius: 50rpx; background: linear-gradient(to right, red , yellow);" > <button style="width: 300rpx;height: 300rpx; background: white; border-radius: 50rpx;">点我</button> </view>直接清除自带的，自己重新写
来个代码片段
.button {width: 96rpx;height: 58rpx;border: 2rpx solid;text-align: center;line-height: 58rpx;border-image: linear-gradient(315deg, rgba(73, 126, 247, 1), rgba(183, 88, 248, 1)) 2 2;}https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius
-moz-border-radius:0.3em; -webkit-border-radius:0.3em; border-radius:0.3em;