如何使用CSS制作半透明邊框？

Question

我有一個彈出窗口，我想給它一個透明的邊框。 我設置了這些屬性：

li.sub-nav ul.megamenu {
    position: absolute;
    left: 0;
    margin-top: 10px;
    z-index: 100;
    padding-top: 3px;
    -moz-background-clip: border; /* Firefox 3.6 */
    -webkit-background-clip: border; /* Safari 4? Chrome 6? */
    background-clip: border-box;
}

.nav-top-container .megamenu {
    background: #005525;
    background: rgba(0, 85, 37, .98);
    border-top: 1px solid #227b33;
    border-bottom: #005525;
    border-bottom:8px solid rgba(0, 85, 37, .98);
}

我根據本文添加了background-clip屬性，還嘗試將其設置為content和padding ，但是它不起作用。

Answer 1

在padding上使用background-clip ，因為它是最接近邊框的盒子模型。 默認值為border ，這會使背景位於透明邊框的后面。

 body { background: yellow; } div { padding: 30px; background-color: white; border: 15px solid rgba(255,0,0,0.5); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; } 

 <div></div> 

Answer 2

正如我在對@LGSon的評論中所指出的那樣，令您沮喪的問題是元素的background延伸到邊框區域。 一個簡單的解決方法是將背景應用於嵌套元素，如以下示例所示：

https://jsfiddle.net/yqx7abd8/

 body { background: url(http://lorempixel.com/800/800/city/1) center / cover; } .border { margin: 30px; border: 15px solid rgba(255,0,0,0.3); } .content { background: #fff; padding: 30px; } 

 <div class="border"> <div class="content"> <p> My Content </p> </div> </div>