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

Question

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

想要的结果：所有边框都是白色

问题：CSS

中的边框颜色设置为白色

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

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

Answer 1

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

如 Marcos Pérez Gude in 所述，按钮的默认 border-style 是 outset，input 和 textarea 元素是 inset。

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

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

UA 样式表值的屏幕截图：

Answer 2

将此行添加到您的 CSS

border-style: solid;

Answer 3

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

您也可以使用这样的 easier-to-remember 代码：

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

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

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

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

CSS Border Color: How to set bottom border color?

html

css

border