Beispiel für die Verwendung der Eigenschaft „Rahmenfarbe“ in CSS3

Border-color ist ein Attribut, das speziell für mehrfarbige Ränder vorbereitet wurde. Als nächstes werde ich Ihnen die Verwendung von mehrfarbigen Rahmenfarben in CSS3 vorstellen gefällt mir. Verpassen Sie es nicht CSS3 border multi-color Border-color ist eine Eigenschaft, die speziell für mehrfarbige Ränder vorbereitet wurde. Es gibt auch ein Randfarbattribut in CSS2, aber was macht das Randfarbattribut in CSS3? Lassen Sie mich Ihnen die mehrfarbige Randfarbe von CSS3-Rändern vorstellen.

1. Rahmenfarbensyntax

Der Code lautet wie folgt:

Elementselektor {
-moz-border-top-colors: color color color; /*Top border*/
-moz-border-right-colors:color color color;
bottom-colors: color color color; /*bottom border*/ -moz-border-left-colors: color color color; /*left border*/

2. Randfarbenkompatibilität

3. Randfarbenbeispiele
CSS-Code:
Der Code lautet wie folgt:

p {width:100px;

height

:50px;border:10px solid transparent;margin:20px /*Oberer Rand*/ -moz-border-top-colors: #bfe6f8 #b0e3fa #9fdefa #89d6f9 #73cff9 #5dcafc #3ac1fe #20b7fb #05b1ff
/*Unterer Rand*/
- moz-border-bottom-colors: #ded7fc #c9bdfd #b7a6fe #a18bfc #8c72fb #7657fe #633ffe #4e25fe #3c0ffd;
/*right border*/
-moz-border-right-colors : #dbfdd5 #c4feba #adfe9f #96fe84 #89ff76 #72fa5b #57fd3c #43fe24 #25fd01;
/*left border*/
-moz-border-left-colors: #ffc9c9 #ffb0b0 #ff9696 #fd7f7f # fd6969 #fd5050 #fd3838 #fd1b1b #fe0101;

HTML-Code:

Der Code lautet wie folgt:

Menglong Station

Vorschaueffekt:

Das obige ist der detaillierte Inhalt vonBeispiel für die Verwendung der Eigenschaft „Rahmenfarbe“ in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!