微信小程序button边框的去除

小程序button默认样式带一个灰色的border, 就像这样:

我试过直接覆盖, 发现毫无效果, 原本的灰色边框和我自己加的会重叠:

如果需要改变颜色需要先去除掉这个border: 

/*先去除掉button自带的边框*/
button::after{
  border: none;
}
/*添加边框*/
button{
  background: RGBA(246, 222, 192, 1);
  font-size: 32rpx;
  font-family: MicrosoftYaHei;
  color: rgba(255, 138, 0, 1);
  border-radius: 44rpx;
  border: RGBA(255, 138, 0, 1) solid 1rpx;
}

效果就是这样, 只有橙色的边边了. 

猜你喜欢

转载自blog.csdn.net/Mercwang/article/details/81836212