在两个独立的div周围可视地合并边框，使它们看起来像一个

Question

我有两个盒子在顶部，一个在左边 我使用:after属性在div之后添加行（边框）。

我想做的第一件事就是＆＃34;加入＆＃34;两个红色border.Right现在他们之间有空隙，但如果我将#toolbar::after left更改为＆＃39; 15px＆＃39;我在红线之间得到了不需要的绿线 - 这可以修复吗？

另一件事是徘徊在侧边栏上。将鼠标光标移动到侧边栏后，它移动到left:0，但工具栏周围的边框不移动。将鼠标悬停在侧边栏上后，我可以修改工具栏边框吗？

下面是说明我的问题的示例代码

＆＃13;

＆＃13;

html {
    background: #e6e6e6;
}
#sidebar, #toolbar {
    position: fixed;
    top: 0;
    left: 0;
}
#toolbar {
    z-index: 102;
    height: 50px;
    right: 0;
    text-shadow: 0 -1px 0 #000000;
    background: #222222;
}
#sidebar {
    z-index: 103;
    bottom: 0;
    width: 80px;
    margin-top: 50px;
    background: black;
    left: -60px;
    transition: all 0.2s ease;
    transform: translateZ(0);
}
#sidebar:hover {
		left: 0;
	}
#sidebar::after {
    content:'';
    bottom: 0;
    width: 4px;
    position: absolute;
    right: 0px;
    top: 0;
    display: block;
    border-right: 1px solid green;
    background: red;
    -webkit-box-sizing: initial;
    ;
}
#toolbar::after {
    content:'';
    right: 0;
    height: 4px;
    position: absolute;
    left: 20px;
    bottom: 0;
    display: block;
    border-bottom: 1px solid green;
    background: red;
    -webkit-box-sizing: initial;
    ;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="toolbar"></div>
<div id="sidebar"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用box-shadow代替border box-shadow: 5px 1px 0px 0px green;

注意： - html <{1}}上的pseudo时，left元素的hovered结构已更改为sidebar

＆＃13;

＆＃13;

html {
  background: #e6e6e6;
}
#sidebar,
#toolbar {
  position: fixed;
  top: 0;
  left: 0;
}
#toolbar {
  z-index: 102;
  height: 50px;
  right: 0;
  text-shadow: 0 -1px 0 #000000;
  background: #222222;
}
#sidebar {
  z-index: 103;
  bottom: 0;
  width: 80px;
  margin-top: 50px;
  background: black;
  left: -60px;
  transition: all 0.2s ease;
  transform: translateZ(0);
}
#sidebar:hover {
  left: 0;
}
#sidebar::after {
  content: '';
  bottom: 0;
  width: 4px;
  position: absolute;
  right: 0px;
  top: 0;
  display: block;
  border-right: 1px solid green;
  background: red;
  -webkit-box-sizing: initial;
  ;
}
#toolbar::after {
  content: '';
  right: 0;
  height: 4px;
  position: absolute;
  left: 15px;
  bottom: 0;
  display: block;
  background: red;
  -webkit-box-sizing: initial;
  box-shadow: 5px 1px 0px 0px green;
  transition: all 0.2s ease;
}
#sidebar:hover + #toolbar::after {
  left: 75px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id="sidebar"></div>
<div id="toolbar"></div>

＆＃13;

＆＃13;

＆＃13;