子div隐藏父项的边框

我有一个菜单，此菜单顶部有一个div。子div隐藏父项的边框

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

#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>

来源

2016-03-02 Rick Joe

你可以使用一个背景图像或梯度：

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

<div id=menu2> 
 

 
    <div id=menu2top></div> 
 

 
</div>

来源

2016-03-02 18:50:04

您可以使用伪after实现这一

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

<div id=menu2> 
 

 
    <div id=menu2top></div> 
 

 
</div>

来源

2016-03-02 18:50:11 LGSon

为此，您可以通过改变overflow-y到visible，并#menu2top的width到201px。不过请注意，在背景不透明度为0.2的#menu2top上，边框无论如何都会显示出来。您可能想要使其不透明，具体取决于您的目标是什么。 :)

来源

2016-03-02 19:14:09

子div隐藏父项的边框

回答

相关问题