CSS 按钮边框由于某种原因不起作用

Bad*_*ngh 3 html css bootstrap-4

我已经为 css 按钮添加了边框,但由于某种原因,它没有生效。

有人可以建议修复吗,将代码附加到片段中

body {
  background: grey;
}

a.button {
  display: inline-block;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS BUTTON</title>
</head>
<body>
<a href="#test" class="button">Click Me</a>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

Nat*_*ick 5

使用-webkit-appearance:无;关闭 iOS 默认按钮样式,而不是“按钮”。这里有一篇很棒的文章。我已经附加了让您的按钮正常工作的代码:

body {
background: blue;
}

a.button {
  display: inline-block;
  /*-webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;*/
  -webkit-appearance: none;
  text-decoration: none;
  background-color: black;
  border: 1px solid white;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}
Run Code Online (Sandbox Code Playgroud)
<a href="#test" class="button">Click Me</a>
Run Code Online (Sandbox Code Playgroud)