收藏
回答

button的边框如何渐变加圆角?

button的边框如何渐变加圆角?

回答关注问题邀请回答
收藏

6 个回答

  • 曹孟良
    曹孟良
    2021-11-09

    这个方案可以实现,看的懂不,为了清晰点,我把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>
    
    2021-11-09
    有用 4
    回复 3
    • 曹孟良
      曹孟良
      2021-11-09
      2021-11-09
      回复
    • ,,,
      ,,,
      2021-11-09
      懂了,谢谢
      2021-11-09
      回复
    • 曹孟良
      曹孟良
      2021-11-09回复,,,
      客气😀
      2021-11-09
      回复
  • 神经蛙
    神经蛙
    2021-11-09

    直接清除自带的,自己重新写

    2021-11-09
    有用 3
    回复
  • 微喵网络
    微喵网络
    2021-11-09

    来个代码片段

    2021-11-09
    有用
    回复 3
  • Cjiang
    Cjiang
    2021-11-09

    https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius

    2021-11-09
    有用
    回复 1
    • ,,,
      ,,,
      2021-11-09
      有 border-image border-radius设置无效
      2021-11-09
      回复
  • ,,,
    ,,,
    2021-11-09

    目前可以实现边框渐变,但是不能圆角

    2021-11-09
    有用
    回复
  • xplee
    xplee
    2021-11-09
      -moz-border-radius:0.3em; 
      -webkit-border-radius:0.3em; 
      border-radius:0.3em;
    
    2021-11-09
    有用
    回复 2
    • ,,,
      ,,,
      2021-11-09
      添加上去后没什么效果呢
      2021-11-09
      回复
    • xplee
      xplee
      2021-11-09回复,,,
      调整一下值,也可以用rpx
      2021-11-09
      回复
登录 后发表内容