Heim  >  Artikel  >  Web-Frontend  >  CSS3-Tutorial (3): Rahmenfarbe für Webseiten, Rahmenfarbe_css3_CSS_webseitensystem

CSS3-Tutorial (3): Rahmenfarbe für Webseiten, Rahmenfarbe_css3_CSS_webseitensystem

黄舟
黄舟Original
2016-12-23 15:56:361712Durchsuche

Webseitenerstellung Webjx-Artikeleinführung: Schauen wir uns nun an, wie man der Rahmenfarbe des Rahmens weitere Farben hinzufügt. Schauen wir uns nun an, wie man der Rahmenfarbe des Rahmens weitere Farben hinzufügt. Im vorherigen Artikel wurde Folgendes vorgestellt: CSS3-Tutorial (2): Radius des Webseitenrandes und abgerundete Ecken der Webseite mit CSS3 border-r


Jetzt schauen wir uns an, wie man mehr zur Randfarbe von hinzufügt die Randfarbe.
Jetzt schauen wir uns an, wie man der Rahmenfarbe des Rahmens weitere Farben hinzufügt.
Im vorherigen Artikel wurde Folgendes vorgestellt: CSS3-Tutorial (2): Webseiten-Randradius und abgerundete Webseiten-Ecken
Verwenden Sie die Border-Radius-Eigenschaft von CSS3. Wenn Sie die Breite des Rahmens auf X px einstellen, ist dies möglich Verwenden Sie X-Farben am Rand, wobei jede Farbe eine Breite von 1 Pixel aufweist. Wenn Ihr Rahmen 10 Pixel breit ist, aber nur 5 oder 6 Farben deklariert sind, wird die letzte Farbe zur verbleibenden Breite hinzugefügt. Browserkompatibilität
Derzeit unterstützt nur Firefox die CSS3-Border-Color-Eigenschaft, daher müssen wir hier nur das Präfix -moz verwenden.
Alle Artikel dieser Serie über CSS3 werden rechtzeitig aktualisiert, um die Browserkompatibilität zu überwachen. Rahmenfarbe in CSS3

CSS3-Tutorial (3): Rahmenfarbe für Webseiten, Rahmenfarbe_css3_CSS_webseitensystem

Hier ist ein standardmäßiger 10 Pixel breiter Rand und eine Rahmenfarbe:
#borderColor { border: 10px solid #dedede; Farben: #300 #600 #700 #800 #900 #A00; -moz-border-top-colors: #300 #600 #700 #800 #900 #A00; -moz-border-left-colors: #300 #600 #700 #800 #900 #A00; -moz-border-colors: #300 #600 #700 #800 #900 #A00; Höhe: erben; Breite: 590px; :

FireFox (3.0.5)

Google Chrome (1.0.154)

Google Chrome (2.0.156)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows) Rahmenfarbe mit abgerundeten Ecken

CSS3-Tutorial (3): Rahmenfarbe für Webseiten, Rahmenfarbe_css3_CSS_webseitensystem

#borderColorCorner { Grenze: 10px fest #dedede; -moz-border-radius: 15px; -moz-border-bottom-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-top-colors: #303 # 404 #606 #808 #909 #A0A; -moz-border-left-colors: #303 #404 #606 #808 #909 #A0A; -moz-border-right-colors: #303 #404 # 606 #808 # 909 #A0A; padding: 15px 25px; height: inherit; width: 590px; 🎜>

Google Chrome (2.0.156)

Internet Explorer (IE7/IE8 RC1)

Opera (9.6)

Safari (3.2 .1, Windows)

Das Obige ist der Inhalt des CSS3-Tutorials (3): border-color web page border color_css3_CSS_web page system Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn