控制邊框長度

Question

我想限制應用於div元素（或任何HTML元素）的邊框長度。例如考慮一個寬度100px的div，是否有將邊框應用於只有40px寬度本身？

Answer 1

您將需要使用適當寬度的子div來做到這一點。例如：

<div id="outer"> 
    <div id="border"></div> 
    <p>...</p> 
</div> 

有：

#outer { width: 100px; padding-top: 0; } 
#border { width: 40px; border-top: 1px solid black; margin-top: 0; } 

Answer 2

你需要使用一個div嵌套或窄的圖像作爲背景。

儘量不要添加div來顯示邊框，總是儘量做到語義。可能你的設計需要一個補充部分。

Answer 3

而不是添加另一個<div>，你可以簡單地使用僞選擇:before和:after：

div { 
    position: relative; 
} 
div:before { 
    position: absolute; 
    content:''; 
    height: 1px; 
    width: 40%; 
    background-color: black; 
} 

這裏是fiddle。