儿童div隐藏父母的边界

Question

我有一个菜单，这个菜单顶部有一个div。

问题是，我想隐藏在这个子div前面的边框。我不想separete divs，我需要＃menu2top在＃menu2里面。

https://jsfiddle.net/t9ag9yxy/1/

#menu2 {
  position: fixed;
  width: 200px;
  height: 100%;
  z-index: 102;
  overflow-y: auto;
  background-color: #fff;
  top: 0;
  left: 0px;
  border-right: 1px solid #000;
}
#menu2top {
  height: 45px;
  width: 200px;
  background-color: rgba(70, 70, 70, .2);
  z-index: 103;
}

<div id=menu2>

  <div id=menu2top></div>

</div>

Answer 1

您可以将overflow-y更改为visible，将width #menu2top更改为201px。但请注意，0.2上的背景不透明度为#menu2top，无论如何都会显示边框。您可能希望使其不透明，具体取决于您的目标。 ：）

Answer 2

您可以使用背景图片或渐变：

＆＃13;

＆＃13;

#menu2 {
  position: fixed;
  width: 200px;
  height: 100%;
  z-index: 102;
  overflow: auto;
  background-color: #fff;
  top: 0;
  left: 0px;
  background:linear-gradient(black,black)no-repeat right 45px;
  background-size:1px 100% ;
}
#menu2top {
  height: 45px;
  background-color: rgba(70, 70, 70, .2);
  z-index: 103;
}

＆＃13;

<div id=menu2>

  <div id=menu2top></div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用伪after来完成

＆＃13;

＆＃13;

#menu2 {
  position: fixed;
  width: 200px;
  height: 100%;
  z-index: 102;
  overflow-y: auto;
  background-color: #fff;
  top: 0;
  left: 0px;
}
#menu2:after {
  content: ' ';
  position: absolute;
  right: 0;
  width: 1px;
  bottom: 0;
  background-color: #000;
  top: 45px;
}

#menu2top {
  height: 45px;
  width: 200px;
  background-color: rgba(70, 70, 70, .2);
  z-index: 103;
}

＆＃13;

<div id=menu2>

  <div id=menu2top></div>

</div>

＆＃13;

＆＃13;

＆＃13;