避免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中文網其他相關文章!