微信小程式中button去除預設的邊框

button {
  position:relative;
  display:block;
  margin-left:auto;
  margin-right:auto;
  padding-left:14px;
  padding-right:14px;
  box-sizing:border-box;
  font-size:18px;
  text-align:center;
  text-decoration:none;
  line-height:2.55555556;
  border-radius:5px;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  color:#000000;
  background-color:#F8F8F8;
}

這是button預設自帶的css樣式

正常來說，去除button我們使用如下代碼即可

button{
    border:none;
}
或者
button{
    outline: none;
}

但是有時候卻不起作用，這個時候我們可以使用::after 偽類選擇器，因為button的邊框樣式是通過::after方式實現的，如果在button上定義邊框就會出現兩條邊框線，所以我們可以使用::after的方式去覆蓋預設值。

button::after {
  border: none;
}

這樣就可以搞定小程式按鈕預設樣式了，只是相當於一個文本的樣式，還是有很多button的預設樣式沒有去除的，這個需要根據個人需求來設置的，這裡不過多說明，後續有再遇到相關情況，再續更，如果需要自定義可以在按鈕上一個類選擇器就可以搞定。