如何防止 CSS 中的雙邊框：輪廓與負邊距？

避免CSS 中的「雙」邊框

當兩個有邊框的相鄰元素並排放置時，可能看起來好像它們有它們相遇的交界處有雙重邊界。為了防止這種視覺偽影，請考慮以下CSS 技術：

使用輪廓而不是邊框

對於可能以任何順序出現的元素，輪廓屬性提供了可靠的解決方案：

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid;
  margin-top: 1px;
  margin-left: 1px;
}</code>

負邊距

或者，在子元素上使用負邊距將有效地「擦除」雙邊邊框：

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

舊版瀏覽器注意事項

舊版瀏覽器（例如​​IE7 及更早版本）不支援Outline 屬性。在這些情況下，建議採用負保證金方法。

以上是如何防止 CSS 中的雙邊框：輪廓與負邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！