微信小程序 button 去掉圆角或边框

去掉圆角

去掉圆角效果图

需要在xxx.wxss里,添加个::after,并且两个地方都需要 border-radius: 0; 才有效

    <!-- xxx.wxml -->
    <button class='btn'>我是按钮</button>

    /* xxx.wxss */
    .btn {
      margin: 30rpx;
      background: white;
      border-radius: 0;
    }

    .btn::after {
      border-radius: 0;
    }

去掉边框

去掉边框效果图

也需要在xxx.wxss里,添加个::after,但只需在::after样式类添加border: none;即可

    <!-- xxx.wxml -->
    <button class='btn'>我是按钮</button>

    /* xxx.wxss */
    .btn {
      margin: 30rpx;
      background: white;
    }

    .btn::after {
      border: none;
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容