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

Question

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

所需结果：所有边框均为白色

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

.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中his comment所述，按钮的默认border-style为outset，input和textarea元素的默认inset为{{} 1}}。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

UA样式表值的Screeshot：

Answer 2

在CSS中添加此行

border-style: solid;

Answer 3

正如哈利强调：你需要指定边框的样式才能更改默认值。

您还可以使用更容易记住的代码：

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

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

Answer 4

在引导程序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>