Doppelkasten/Bordüre? Ist das in CSS möglich?

Question

Ich versuche, dieses Bild in CSS neu zu erstellen.

Dies ist, was ich vom Experimentieren bisher bekommen habe. Ich benutzte Box-Shadow als zweite Box. Ich bin mir nicht sicher, ob es einen besseren Weg gibt, dies zu tun?

h4 { 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    background: white; 
 
    box-shadow: 10px 5px 0px 0px #ffffff, 11px 7px 0px 2px #000000; 
 
}

<h4>3. Scouting for a location</h4>

Answer 1

Sie können dies absolut Elementposition pseudo über erreichen. Vermeiden Sie auch die Duplizierung von Eigenschaften über CSS-Vererbung.

.border { 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    margin: 15px 15px; 
 
    background: white; 
 
    
 
    position: relative; /* new */ 
 
} 
 

 
/* new */ 
 
.border:after { 
 
    content: ""; 
 
    position: absolute; 
 
    display: block; 
 
    background: inherit; 
 
    border-radius: inherit; 
 
    border: inherit; 
 
    left: 2px; 
 
    top: 2px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}

<div class="border">3. Scouting for a location</div>

Answer 2

Verwenden absoluter positioniert :: :: nach oder vor dem Pseudo-Elemente und haben seinen z-Index geringer ist als das Element selbst.

Answer 3

Versuchen Sie dieses Beispiel

Ich hoffe, es wird Ihnen helfen.

.border { 
 
text-align: center; 
 
border: solid 3px black; 
 
border-radius: 5px; 
 
text-decoration: none; 
 
font-weight: 600; 
 
color: black; 
 
letter-spacing: 2px; 
 
padding: 20px 15px; 
 
margin: 15px 15px; 
 
background: white; 
 
-webkit-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
-moz-box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
box-shadow: 3px 3px 0px 0px #ffffff, 3px 3px 0px 3px #000000; 
 
}

<div class="border">Title</div>

EDIT

Hier können Sie jetzt sehen, dass ich box-shadow-3px gemacht und nicht mehr die rechte Seite Ecke.

Answer 4

Das Konzept hinter dem Konzept besteht darin, dass zwei Schatten, ein weißer und ein schwarzer, überlappen, um einen zweiten schwarzen Rand zu simulieren. Aber der schwarze Schatten ist nur in der Richtung sichtbar, in der er vom weißen Schatten versetzt ist, so dass eine Lücke zwischen der ursprünglichen Grenze und dem schwarzen Schatten sichtbar ist (wie im ursprünglichen Beitrag des OP gezeigt).

Die „spread radius“ der schwarze Schatten, diese Lücke zu beseitigen genutzt kann (geschickt demonstrated by Nirav Joshi), aber dann wird die Krümmung der Ecken verstärkt und die beiden Grenzen anders aussehen.

Um den ursprünglichen Rahmen zu duplizieren, würde ich ::after verwenden, um einen absolut positionierten pseudo-element zu generieren und z-index zu verwenden, um es hinter dem ursprünglichen Element zu platzieren. Um sicherzustellen, dass der Rand genau dupliziert wird, mag ich Vadim Ovchinnikov's idea der Erben der Rahmenfarbe und des Radius vom ursprünglichen Element.

.border { 
 
    position: relative; 
 
    text-align: center; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    text-decoration: none; 
 
    font-weight: 600; 
 
    color: black; 
 
    letter-spacing: 2px; 
 
    padding: 20px 15px; 
 
    margin: 15px 15px; 
 
    background: white; 
 
} 
 

 
.border::after { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 3px; 
 
    left: 3px; 
 
    border: solid 3px black; 
 
    border-radius: 5px; 
 
    z-index: -1; 
 
}

<h4 class="border">3. SCOUTING FOR A LOCATION</h4>