<div class="inner-border">
Transparent Inside Border
</div>.inner-border {
background: #000;
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
Tolles Snippet. Danke, Chris.
Man könnte das Gleiche mit
machen, oder irre ich mich?
Dies hat Rendering-Fehler in einigen Browsern und erlaubt auch keine `border-radius`-Effekte
Was ist der Nutzen dieses Codes? Ich meine, wo sollte ich diese Technik anwenden?
Eigentlich funktioniert das, was Stijn sagte. Sie müssen nur den Offset auf das Negative der Outline-Breite setzen.
Jon, die Verwendung der `outline`-Eigenschaft funktioniert großartig in Webkit-basierten Browsern. Firefox rendert sie jedoch nicht perfekt und IE 9 rendert sie wie einen normalen Rand.
Die Methode von Chris funktioniert in all diesen Browsern.
Hallo,
Danke, hat super funktioniert...
.inner-border {
background: #fff;
color: #626262;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 4px solid #e7e7e7;
content: “”;
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.29);
}
Das sollten Sie ausprobieren. Beste Lösung, die ich gefunden habe.
-webkit-box-shadow: 0px 0px 0px 1px #fff;
box-shadow: 0px 0px 0px 1px #fff;
Es fügt keine zusätzlichen Pixel hinzu.
Die von "CHRIS COYIER" vorgeschlagene Lösung ist sehr nützlich, wenn wir den Rand nicht auf allen Seiten wünschen. Die beste Lösung.
Mit `outline` und `box-shadow` können wir keine Seiten auswählen.
Schauen Sie sich den folgenden Link an.
http://codepen.io/manichandra/pen/dMwKMg