問(wèn)題描述：

微信小程序的button控件有一個(gè)灰色的邊框，嘗試去除邊框 border:(none/0); 對(duì)按鈕沒(méi)有效果：

代碼如下

<button loading="{{loading}}" class='endClass' bindtap='goRecharge'>去充值</button> 

.endClass{

  display: block;
  width: 90%; 
  background-color: #00CDCD;
  height: 40px;
  border-radius: 20px;
  color: white;
  font-size: 15px;
  position:absolute;
  bottom:5%;
  margin-left: 10px; 
  border:none; /*正常來(lái)說(shuō)加上這個(gè)是可以去掉邊框的*/
  
}

效果如下：

屏幕快照 2017-12-11 14.29.56.png

打開(kāi)調(diào)試發(fā)現(xiàn)原來(lái)是button控件上有一個(gè)偽元素（::after），后面加了個(gè)border屬性，值為 border:1px solid rgba(0, 0, 0, 0.2)，如下圖所示：

屏幕快照 2017-12-11 14.28.07.png

解決方案：

去掉按鈕邊框

 button[class="endClass"]::after {
    border: 0;
  } 

由于在工作中按鈕都是不需要這個(gè)邊框的所以可以在app.xss吧按鈕初始化為不帶邊框的 以后就不用每個(gè)頁(yè)面都處理這個(gè)問(wèn)題：

button::after {
  border: 0;
}