小程序按钮圆角50%不圆问题

问题

一个按钮，里面含有图片和文字。设置50%圆角，就是有左侧黑边。如下图。

错误图
正确图

原因

在button-after中，给按钮的content默认了“ ”空字符串值。导致按钮宽度不正常。最后勾掉content属性，即可。

image.png

解决方案

在css中将button::after中content置为none。

css代码

/* ====================== 发票按钮 ==================== */
.receiptBtn{
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  border: none;
  background-color: white;

  padding: 0px;

  /* 阴影 */
  box-shadow: 4rpx 4rpx 15rpx -3rpx #333; 

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  position: fixed;
  right: 15rpx;
  bottom: 180rpx;
}

 /* 内容置空，防止按钮不圆*/
button::after {
  content: none;
}