如何使除顶部边框之外的所有边框都没有显示？

Question

我正在尝试使按钮2看起来完全像具有边框顶部属性的按钮1。但是我在Button 2的三个侧面上都出现了灰线。

css：

.button {
  background-color: black;
  border-top: 2px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  outline: none;
}

html：

<a href="#" class="button">Button1</a>
<button class="button">Button2</button>

Answer 1

首先重置边框（请注意顺序很重要）：

private static <T extends Action> void commonMethod(GetListAction<T> getListAction) {
    List<T> list = getListAction.action();
    List<Integer> proIdList = list.stream()
                 .map(Action::getProdId)
                 .collect(Collectors.toList());
    ...
}

border: none;
border-top: 2px solid red;

.button {
  background-color: black;
  border: none;
  border-top: 2px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  outline: none;
}

Answer 2

向按钮添加ID。然后在您的CSS文件中包含以下代码行。

#btn2{
      border-bottom: none;
      border-left: none;
      border-right: none;
    }

<button class="button" id="btn2">Button2</button>

Answer 3

.button {
  background-color: black;
  border-top: 2px solid red !important;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  outline: none;
}

<a href="#" class="button">Button1</a>
<button class="button">Button2</button>

Answer 4

您的边框仍然设置在另一侧，请尝试先删除另一侧，然后再添加边框顶部。或者，也可以只设置border-size: 2px 0 0 0;和border-color: red;。

.button {
  background-color: black;
  border: 0;
  border-top: 2px solid red;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  outline: none;
}

<a href="#" class="button">Button1</a>
<button class="button">Button2</button>

希望这会有所帮助，

Answer 5

您可以使用以下属性覆盖按钮的默认边框属性

border-bottom: none;
border-right: none;
border-left: none;

或者您也可以通过border: none删除按钮的默认边框，然后编写所需的边框属性，例如border-top: 2px solid red。