Question

我有两个带边框的div，如下图所示。

enter image description here

如何仅删除2个div触摸的边框，如下图所示？

enter image description here

这是顶部图片中使用的html和css（js小提琴：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>

Answer 1

您可以执行以下操作：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; 
}

我所做的是向右边添加一个负边距，以便框重叠。

这确实会中断，例如左边的div高于右边的。

Answer 2

检查这个

CSS中的部分边框

2 个答案:

http://jsfiddle.net/whsC4/17/