Verwenden von Pseudoelementen
Sie können ein Pseudoelement so positionieren, dass es entweder hinter dem Element und größer ist, wodurch ein Randeffekt mit eigenem Hintergrund entsteht, oder kleiner und innen (aber stellen Sie sicher, dass der Inhalt oben positioniert wird).
Das Element, das mehrere Ränder benötigt, sollte einen eigenen Rand und eine relative Position haben.
.borders ( position: relative; border: 5px solid #f00; )Der sekundäre Rand wird mit einem Pseudoelement hinzugefügt. Es wird mit absoluter Positionierung eingestellt und mit den Werten oben / links / unten / rechts eingefügt. Dies hat auch einen Rand und wird unter dem Inhalt gehalten (wobei beispielsweise die Auswahlbarkeit von Text und die Klickbarkeit von Links erhalten bleiben), indem ihm ein negativer Z-Index-Wert zugewiesen wird. Vorsicht bei negativem Z-Index. Wenn dies innerhalb eines weiteren Elements mit eigener Hintergrundfarbe liegt, funktioniert dies möglicherweise nicht.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Siehe den Stift gbgRqZ von Chris Coyier (@chriscoyier) auf CodePen.
Sie können einen dritten Rand erstellen, indem Sie auch die :afterPseudoklasse verwenden. Beachten Sie besonders, dass Firefox 3 (vor 3.6) dies durch Stützen :afterund verschraubt :before, aber nicht zulässt, dass sie absolut positioniert sind (so dass es seltsam aussieht).
Umriss verwenden
Während es etwas begrenzter als der Rand ist (umgeht das gesamte Element, egal was passiert), ist der Umriss ein zusätzlicher freier Rand.
.borders ( border: 5px solid blue; outline: 5px solid red; )Box-Shadow verwenden
Sie können Box-Shadow verwenden, um einen Randeffekt zu erzielen, indem Sie den Schattenversatz festlegen und 0 Unschärfe haben. Durch durch Kommas getrennte Werte können Sie außerdem so viele „Rahmen“ haben, wie Sie möchten:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Siehe den Stift xbgreX von Chris Coyier (@chriscoyier) auf CodePen.
Verwenden eines abgeschnittenen Hintergrunds
Sie können den Hintergrund eines Elements vor dem Auffüllen anhalten lassen. Auf diese Weise kann ein normaler Rand eines Elements in gewisser Weise wie ein doppelter Rand aussehen.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Bei einer Eingabe:
Sehen Sie den Pen Double Border-Effekt von Chris Coyier (@chriscoyier) auf CodePen.