如何使用 CSS 有效地改變 HR 元素的顏色？

使用CSS 自訂hr 元素的顏色

嘗試修改hr 標籤的顏色時，通常會遇到挑戰由於該元素的瀏覽器預設樣式。僅 color 屬性可能不夠。

要有效更改hr 標籤產生的線條顏色，請考慮使用border-color 屬性：

hr {
  border-color: #123455;
}

但是，請注意調整線條的大小可能會導致邊框和線條本身之間出現意外間隙或錯位。在這種情況下，建議同時指定邊框顏色和背景顏色以實現所需的外觀。

為了更全面的方法，HTML5 Boilerplate 專案提供了一個預設樣式表，其中包含以下規則：

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

另外，根據SitePoint發表的一篇名為「12個鮮已知的CSS事實」的文章，將border-color:繼承分配給hr 標籤使其能夠採用其父元素的邊框顏色。

以上是如何使用 CSS 有效地改變 HR 元素的顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！