Question

CSS如何让边框长度小于图形本身长度？

效果如图：

就是让某个边框显示出来的长度小于该图形本身的长度，这能做到吗？

Answer 1

　　单个div是做不到的，你可以设置一个大的div，然后上边框去掉，里面设置一个小的div只留一条边，然后定位到上面就可以了。

追问

但是我的字需要在外层div中顶格写，内层的div没有高度可以吗？貌似IE6版本不兼容div高度为0的属性呀？

Answer 2

只用一个div是做不到的。

解决方法：外层一个div写左右下三条边框，里面一个div写一个边框，定位在外层div上。

代码如下：

<div style="width:300px; height:150px; border:1px solid #000; border-top:none; position:relative;">
	<div style="width:200px; height:1px; border-top:1px solid #000; position:absolute; top:0; left:50%; margin-left:-100px;"></div>
</div>

追问

但是我的字需要在外层div中顶格写，内层的div没有高度可以吗？貌似IE6版本不兼容div高度为0的属性呀？

追答

内层div只做一条黑色边框线用，文字和内层div平级写就可以，它们完全不冲突的。

Answer 3

<div style="width:250px; height:219px; border:3px #ff0000 solid; position:absolute;"></div><img src="20150907155529601_54.jpg" />

代码由[且听风吟福利吧]奉上

Answer 4

应该是不行的