erstellen Border In CSS, das invertiert und tut nach außen

Question

hinzufügen Ich frage mich, wie eine Grenze zu schaffen, die an der Außenseite eines div trägt nicht funktioniert aber es ist Art und Weise innerhalb

#MenuBox { 
    position: absolute; 
    top: 10%; 
    left: 2.5%; 
    width: 95%; 
    height: 80%; 
    background-color: #5a5b54; 
    z-index: 1; 
    margin: -10px; 
    border: 10px solid black; 

} 

versucht mit einer Marge obwohl es hat nicht funktioniert

Answer 1

per meinem Kommentar gibt es zwei Lösungen für Ihr Problem:

Lösung 1: Verwenden border-box

box-sizing: border-box wird die Breiten- und Höhenberechnung des Elements erzwingen, um Randbreiten zu berücksichtigen.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#MenuBox { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 2.5%; 
 
    width: 95%; 
 
    height: 80%; 
 
    background-color: #5a5b54; 
 
    z-index: 1; 
 
    
 
    border: solid 10px black; 
 
    
 
    /* Calculate border as part of width and height */ 
 
    box-sizing: border-box; 
 
}

<div id="MenuBox"> 
 
#MenuBox 
 
</div>

Lösung 2: Verwenden Sie box-shadow als Grenz Ersatz

einen Einsatz box-shadow mit einem Spread von 10px verwendet, wird der Effekt der mit einer Grenze imitieren, aber dieses Mal ist es innerhalb der Grenzen des Elements sein. Dieser Effekt ist nützlich if you want to have multiple borders, aber ansonsten bleiben Sie bei Lösung # 1.

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#MenuBox { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 2.5%; 
 
    width: 95%; 
 
    height: 80%; 
 
    background-color: #5a5b54; 
 
    z-index: 1; 
 
    
 
    /* Use box-shadow */ 
 
    box-shadow: inset 0 0 0 10px black; 
 
    
 
    /* Use padding to offset content */ 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
}

<div id="MenuBox"> 
 
#MenuBox 
 
</div>