2016-03-02 148 views
0

我有一個菜單,此菜單頂部有一個div。子div隱藏父項的邊框

問題是,我想隱藏在這個子div前面的邊框。我不想分開div,我需要#menu2top在#menu2裏面。

enter image description here

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>

回答

1

你可以使用一個背景圖像或梯度:

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

1

您可以使用僞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>

2

爲此,您可以通過改變overflow-yvisible,並#menu2topwidth201px。不過請注意,在背景不透明度爲0.2#menu2top上,邊框無論如何都會顯示出來。您可能想要使其不透明,具體取決於您的目標是什麼。 :)