如何从按钮中取出除顶部边框之外的所有边框？ [复制]答案

【问题标题】：How to take all borders out of button except top border? [duplicate]如何从按钮中取出除顶部边框之外的所有边框？ [复制]
【发布时间】：2023-03-29 15:32:01
【问题描述】：

我正在尝试使按钮 2 看起来与按钮 1 完全一样，并带有边框顶部属性。但我在按钮 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>

【问题讨论】：

标签： css

【解决方案1】：

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

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

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

【讨论】：

所有答案都很有用。我最喜欢你的。
谢谢，不客气！

【解决方案2】：

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

【讨论】：

【解决方案3】：

为按钮添加一个 id。然后在您的 CSS 文件中包含以下代码行。

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

&lt;button class="button" id="btn2"&gt;Button2&lt;/button&gt;

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

您的边框仍然设置为其他边，请尝试先删除其他边，然后添加边框顶部。或者，也可以设置 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>

希望这会有所帮助，

【讨论】：