注意:之前似乎有一个same problem,但我希望以更好的方式提问,得到一个标记为已解决的答案。
简而言之,透明元素边框并不是真正透明的,因为它们采用元素背景的颜色而不是不可见,尽管它被绘制为“外边框”。如何用CSS绘制真正的透明边框?
为什么我要这个?
因为我有CSS menu with drop down on hover。在主菜单和子菜单之间,需要在它们之间存在间隙。间隙导致悬停失去焦点,从而关闭菜单。可能还有其他方法可以做到,但如果可能的话,透明边框也会很整洁。
HTML
- Item 1
- Subitem 1
- Item 2
- Subitem 2
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;
}