控制边框长度

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。