CSS边框颜色：如何设置底部边框颜色？答案

【问题标题】：CSS Border Color: How to set bottom border color?CSS边框颜色：如何设置底部边框颜色？
【发布时间】：2018-09-06 16:58:20
【问题描述】：

当前结果：底部边框为灰色

期望的结果：所有的边框都是白色的

问题：CSS 中的border-color 设置为白色

.zoom {
  border-width: 2px 0px 2px 0px;
  background: white;
  border-color: white;
}

&lt;button class="zoom"&gt;???&lt;/button&gt;

【问题讨论】：

提示：按钮的默认border-style 是outset。

标签： html css border

【解决方案1】：

您必须将border-style 明确设置为solid 才能使其工作。您在底部看到的灰色边框是因为默认的 UA 样式，我是 border-style: outset。

正如Marcos Pérez Gude 在his comment 中所指出的，按钮的默认border-style 是outset，input 和textarea 元素的默认inset。

.zoom {
  border-width: 2px 0px 2px 0px;
  background: white;
  border-color: white;
  border-style: solid;
}

&lt;button class="zoom"&gt;???&lt;/button&gt;

UA 样式表值的截图：

【讨论】：

outset 是按钮的默认值，因为在 chrome 存在之前。 inset 用于文本输入或文本区域 :)
@MarcosPérezGude：没有伙伴。这是一条有价值的信息。感谢您的评论，并将其添加到答案中:)
感谢您的参考！我在这里需要一些声誉:-)
我刚刚想通了，在想为什么！？我猜 OP 只是想让按钮稍微高一点，但没有任何视觉注意。
同意，但使用填充或高度会更好，反正与问题本身无关。

【解决方案2】：

在你的 CSS 中添加这一行

border-style: solid;

【讨论】：

【解决方案3】：

正如 Harry 强调的那样：您需要指定边框的样式才能更改默认值。

您也可以使用这样更容易记住的代码：

.zoom {
border-top:3px solid white;
border-bottom:3px solid white;
background-color:white;
}

<button class="zoom">???</button>

【讨论】：

【解决方案4】：

在 bootstrap 4 中，您可以使用 border utilities 来添加或删除元素的边框。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<button class="border-0 bg-white">???</button>

【讨论】：