CSS邊框實現重合可以通過兩種方式進行,一種是使用負值的border-width屬性,另一種是使用偽元素來實現。下面我們分別介紹這兩種方法。
/* 方法一:使用負值的border-width屬性 */ .box { border: 2px solid #000; border-top-width: 0; border-bottom-width: -2px; border-left-width: -2px; border-right-width: -2px; } /* 方法二:使用偽元素 */ .box { position: relative; } .box::before { content: ""; position: absolute; top: -2px; left: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border: 2px solid #000; }
以上是兩種常用的實現方法,使用其中的任何一種都可以讓邊框實現重合。需要注意的是,在使用偽元素實現重合時,需要設置父元素的position屬性為relative,否則偽元素無法正確定位。
上一篇學習css 重點