子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隱藏父項的邊框

回答

相關問題