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

使用li的背景颜色代替ul＆amp;使用填充顶部

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 here http://jsfiddle.net/gkbcj9sr/2/

使用rgba颜色，但检查所有浏览器是否支持它们。

Answer 3

检查这个小提琴：http://jsfiddle.net/gkbcj9sr/6/

我改变了一点你的CSS以保持你的html完整：

将ul ul规则更改为ul ul li，以便将背景添加到li而不是整个ul，这会导致您遇到麻烦。

在您的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;
}

希望这是你在找。

如何用CSS绘制真正的透明边框？

3 个答案: