css - 视觉上合并两个独立 div 周围的边框，使它们看起来像一个

Question

我有两个盒子，一个在上面，一个在左边。
我正在使用 :after 属性在 div 之后添加行(边框)。

我要做的第一件事是“加入”两个红色边框。现在它们之间有空隙，但如果我将 #toolbar::after left 更改为“15px”，我会得到红线之间不需要的绿线 - 这可以修复吗？

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

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

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;
    ;
}

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

Answer 1

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

注意:- 我已经更改了 pseudo 元素的 html 结构，当 hovered 时移动到 left在侧边栏

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;
}

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