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

【问题标题】：CSS Button Border not working for some reasonCSS按钮边框由于某种原因不起作用
【发布时间】：2020-01-05 23:12:44
【问题描述】：

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

有人可以建议修复吗，附上sn-ps中的代码

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;
}

<!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>

【问题讨论】：

按钮是白色背景的？
@EternalHour 是的。目前背景是白色的。尽管不认为由于什么而边框不可见。我尝试将背景颜色更改为深色，但仍然看不到边框
好吧，如果您的边框与背景颜色相同，它将不可见。您的规则看起来正确。
@EternalHour 我更改了背景颜色。仍然根本看不到白色边框
它在 Firefox 上运行良好，可能是特定于浏览器的。 jsfiddle.net/5zeLo97q

标签： html css bootstrap-4

【解决方案1】：

使用-webkit-appearance：无；关闭 iOS 默认按钮样式，而不是“按钮”。 A great article here。我已经附上了你的按钮工作的代码：

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;
}

&lt;a href="#test" class="button"&gt;Click Me&lt;/a&gt;

【讨论】：

Cool @BadalSingh 如果您认为我的答案是正确的，请投票支持我的答案。

【解决方案2】：

当您删除属性-webkit-appearance: button; 或设置为“无”时，按钮生效。我认为外观属性不带边框效果

【讨论】：

【解决方案3】：

当使用 -webkit-appearance 属性时，它的目的是为浏览器提供一种使用基于操作系统主题的平台原生样式来显示元素的方法。

这会导致操作系统的样式干扰您的自定义 CSS。要应用自定义样式，除了自定义 css 之外，您还需要将 -webkit-appearance 设置为 none。

以下是使用自定义样式的方法：

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: inline-block;
    vertical-align: middle;
}

input[type="checkbox"] {
    border: 2px solid #555;
    width: 20px;
    height: 20px;
    outline: none;
    padding: 4px;
}
input[type="checkbox"]:checked {
    background: #555;
    background-clip: content-box;
}
input[type="radio"] {
    border: 2px solid #555;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    outline: none;
    padding: 4px;
}
input[type="radio"]:checked {
    background: #555;
    background-clip: content-box;
}
p, h3 {
    color: #333;
    font-family: helvetica, arial;
}
label {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 -2px 8px;
}

<h3>Check:</h3>
<p><input type="checkbox"></input><label>Include Options</label></p>
<h3><br/>Select one:</h3>
<p><input type="radio" name="radio"></input><label>Option A</label></p>
<p><input type="radio" name="radio"></input><label>Option B</label></p>

【讨论】：

【解决方案4】：

您正在将button 设置为-webkit-appearance-button，从而使边框不可见。

a.button {
  display: inline-block;
  text-decoration: none;
  background-color: black;
  border: 5px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
}

<!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>

【讨论】：