Wie mache ich eine halbtransparente Grenze mit CSS?

Question

Ich habe ein Popup und ich möchte es eine transparente Grenze geben. Ich habe diese Eigenschaften festgelegt:

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); 
} 

ich die background-clip Eigenschaften nach this article hinzugefügt, ich habe auch versucht, es zu content und padding Einstellung, aber es funktioniert nicht.

Answer 1

Wie ich in meinem Kommentar zu @LGSon angegeben habe, ist das Problem, dass Sie frustriert sind, dass die background Ihres Elements in den Grenzbereich erstreckt. Eine einfache Abhilfe für dieses ist, dass Hintergrund zu einem verschachtelten Element wie im folgenden Beispiel gelten:

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>

Answer 2

Verwenden background-clip auf dem padding, da es in der Nähe Box -Modell an der Grenze. Der Standardwert ist border, wodurch der Hintergrund hinter dem transparenten Rahmen liegt.

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>