部分宽度边框

Question

如何制作不拉伸给定方框宽度的边框？ E.g：

我是否必须使用不同宽度的单独HTML元素？或者我可以通过CSS完全实现这一点。

Answer 1

您始终可以使用CSS：after语句：

<style>
div.hr-like:after {
    height:1px;
    background:#333;
    width:25%;
    display:block;
    margin:0px auto;
    content:""
}
</style>

<div class="hr-like">
    foo
</div>

---

补充：以下是jsfiddle

的示例

Answer 2

您可以为每个部分div指定背景图像，并将其放在中间的底部。然后分隔符可以是你想要的和你想要多长时间，就像那条铅笔线一样。

#content {
    background: transparent url('http://placekitten.com/200/10') no-repeat bottom center;
}

对小猫抱歉......