如何使用CSS繪製真正的透明邊框？

Question

注：以前似乎有一個same problem，但我希望以更好的方式提出問題，獲得答案標記爲已解決。

簡而言之，透明元素邊框並不是真正透明的，因爲它們採用元素背景的顏色，而不是不可見的事件，儘管它被繪製爲「外部邊框」。我怎樣才能用CSS來繪製真正的透明邊框？

爲什麼我要這個？

因爲我有CSS menu with drop down on hover。在主菜單和子菜單之間，需要在兩者之間存在空隙。間隙導致懸停失去焦點，從而關閉菜單。可能還有其他方法可以做到這一點，但如果可能的話，透明邊框將會很整齊。

HTML

<ul id="root"> 
    <li>Item 1 
     <ul><li>Subitem 1</li></ul> 
    </li> 
    <li>Item 2 
     <ul><li>Subitem 2</li></ul> 
    </li> 
</ul> 

CSS

ul, li { 
    list-style: none; 
    margin: 0; padding: 0; 
    color: #fff; 
} 
ul ul { background-color: red; } 
ul#root > li { 
    background-color: blue; 
    display: inline-block; 
    position: relative 
} 
ul#root > li > ul { 
    position: absolute; 
    display: none; 
    /* margin-top: 10px; want to have gap but the hover will lose focus*/ 
    border-top: 10px solid green; /* if only this is transparent */ 
} 
ul#root > li:hover > ul { 
    position: absolute; 
    display: block; 
} 

Answer 1

使用的背景顏色裏，而不是UL &使用填充頂部

ul#root > li > ul { padding-top:10px; background: transparent; } 
ul#root > li > ul > li { background: #f00; } 

或使用

ul#root > li > ul { border-top :10px solid rgba(0,0,0,0); } 

或

ul#root > li > ul { border-top :10px solid transparent; } 

Answer 2

enter code herehttp://jsfiddle.net/gkbcj9sr/2/

使用RGBA顏色，但是否所有的瀏覽器支持與否。

Answer 3

檢查此琴：http://jsfiddle.net/gkbcj9sr/6/

我改變一點點你的CSS爲了保持你的HTML完整：

改變了ul ul規則，以ul ul li爲背景添加到裏，而不是到這是造成你麻煩的全部。

將border-top: transparent添加到您的ul#root > li > ul規則中，讓您有透明的差距。

這裏是新的CSS：

ul, li { 
    list-style: none; 
    margin: 0; padding: 0; 
    color: #fff; 
} 
#root { border: 1px solid green; } 
ul ul li { background-color: red; } /* Background only in your li elemnts 
ul#root > li { 
    background-color: blue; 
    display: inline-block; 
    position: relative 
} 
ul#root > li > ul { 
    position: absolute; 
    display: none; 
    /* margin-top: 10px; want to have gap but the hover will trigger */ 
    border-top: 10px solid transparent; /* transparent border top */ 
} 
ul#root > li:hover > ul { 
    position: absolute; 
    display: block; 
} 

希望這是你要找的人。