CSS中的部分边框 [英] Partial Border in CSS
本文介绍了CSS中的部分边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个边框，如下图所示。
I have two divs with borders as the picture below shows.
如何只删除2 divs触摸的边框，如下图所示？
How do I remove only the border where the 2 divs touch like the picture below shows?
>
这是在顶部图片中使用的html和css（js fiddle： http://jsfiddle.net/paulyoder/whsC4/19/ ）
Here is the html and css used in the top picture (js fiddle: http://jsfiddle.net/paulyoder/whsC4/19/)
<html>
<head>
<style type="text/css">
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black
}
#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
}
body { padding: 10px; }
h2 { margin: 5px; }
</style>
</head>
<body>
<div id="sideBar">
<h2>Side Bar</h2>
</div>
<div id="balanceSheetSummary">
<h2>Content</h2>
</div>
</body>
</html>
推荐答案
你可以这样做：http://jsfiddle.net/sj2AD/1/
#sideBar {
float: left;
width: 75px;
height: 50px;
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background: red;
position: relative;
z-index: 2;
}
#balanceSheetSummary {
float: left;
width: 150px;
height: 150px;
border: 1px solid black;
background: red;
position: relative;
z-index: 1;
margin-left: -1px;
}
body {
padding: 10px;
}
h2 {
margin: 5px;
}
我所做的是在右边添加一个负边距，框重叠。
What I did was to add a negative margin to the right one so that the boxes overlap.
这会中断，例如，如果左div高于正确的值。
This does break, for example if the left div is higher than the right one.
这篇关于CSS中的部分边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
