Ja, wir wissen: Wir können die Breite des Rahmens auf 5 Pixel, 10 Pixel, 20 Pixel oder einen beliebigen Wert festlegen.
Haben Sie sich jemals vorgestellt, dass Sie für jeden 1-Pixel-Rand eine eigene Farbe festlegen können? Was ist dieses Konzept? Das heißt, wenn Sie für ein Element einen 10-Pixel-Rand festlegen, können Sie für diesen 10-Pixel-Randbereich 10 Farben festlegen. Jedes 1 Pixel ist eine Ebene (Gruppe). DEMO: Detaillierte Erklärung mehrerer Sätze von Rahmenfarben in CSS3-Rahmenfarben
Sehen wir uns nun an, wie man die Rahmengröße für Elemente festlegt (Codeblock 1):
Der obige Code zeigt an, dass wir mit className test einen 6px-Rahmen für ein div-Element definiert haben. Dies ist natürlich ein Rechteck mit 4 Seiten.
Daher kann dieser CSS-Code tatsächlich zu (Codeblock 2) verfeinert werden:
Durch den verfeinerten Code haben wir herausgefunden, dass wir tatsächlich Farben für die vier Seiten des Rechtecks festlegen können. Ob die Farben gleich oder unterschiedlich sein sollten, hängt von Ihren eigenen Anforderungen ab.
Wenn Sie den verfeinerten Code ausführen (natürlich können Sie die Farbe jeder Seite ändern), sehen Sie ein Rechteck mit einem 6 Pixel großen schwarzen Rand. Nun, das ist es, was wir erwarten.
Jetzt können wir jedoch den 6-Pixel-Rahmen in 6 Gruppen aufteilen, wobei jedes 1-Pixel eine Gruppe ist, sodass jeder Rahmen auf bis zu 6 verschiedene Farben eingestellt werden kann.
Wie geht das? Werfen Sie einen Blick darauf (Codeblock drei):
.prüfen{
Rahmenbreite:6px;
Rahmenstil:solid;
border-top-colors:#000 #fff #999 #aaa #ccc #eee;
border-right-colors:#000 #fff #999 #aaa #ccc #eee;
border-bottom-colors:#000 #fff #999 #aaa #ccc #eee;
border-left-colors:#000 #fff #999 #aaa #ccc #eee;
}
.prüfen{
Rahmenbreite:6px;
Rahmenstil:solid;
border-top-color:#000;
border-right-color:#000;
border-bottom-color:#000;
border-left-color:#000;
}
.prüfen{
border:6px solid #000;
}
<div class="test">Einstellungen für Rahmenfarbe testen</div>