如何建立小於其包含的 Div 寬度的 CSS 邊框？

建立小於 Div 寬度的邊框

在 CSS 中，邊框的寬度通常由其元素的寬度決定包圍。如果您希望邊框小於其容器元素的寬度，則可以使用偽元素。具體方法如下：

 寬度：200px;<br> 高度：50px; <br> 位置：相對； <br> z 索引：1；<br>背景：#eee;<br>}<p>div:before {<br> 內容："";<br> 位置：絕對；<br>左：0；<br>底部：0；<br>高度： 1px;<br>寬度：50%； /<em> 或100px </em>/<br> 邊框底部：1px 純洋紅；<br>}</p>

<div>Item 2</div>

在這個例子中，我們使用:before 偽元素來建立一個寬度只有一半的邊框容器分區。我們透過將 :before 元素的 width 屬性設為 50% 或所需的寬度（例如 100px）來實現此目的。我們也使用position:absolute屬性將:before元素絕對定位在容器div內。

z-index屬性確保:before元素位於容器div內容的上方。這可以防止邊框隱藏在內容後面。

透過使用偽元素，您可以建立與其容器元素具有不同寬度和位置的邊框。這種靈活性使您可以創建自訂視覺效果並增強網頁的設計。

以上是如何建立小於其包含的 Div 寬度的 CSS 邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！