CSS3-Tutorial (4): Webseitenränder und Webseitentextshadow_css3_CSS_Webseite

Webseitenerstellung Webjx-Artikeleinführung: Shadows gibt es seit CSS2, aber nur Safari unterstützt es, und das ist auch heute noch der Fall. Schatten können in CSS3 auf Rahmen und Text angewendet werden, genau wie der Schatteneffekt von Bildern seit CSS2, aber Safari ist der einzige Browser.

Schatten gibt es seit CSS2. Ja, aber nur Safari unterstützt es, und das ist auch heute noch so. Schatten können in CSS3 auf Ränder und Text angewendet werden, genau wie der Schatteneffekt von Bildern.
Schatten gibt es seit CSS2, aber nur Safari unterstützt dies, und das ist auch heute noch der Fall. Schatten können in CSS3 auf Rahmen und Text angewendet werden, genau wie Schatten für Bilder.
Der vorherige Artikel führte ein: CSS3-Tutorial (3): Rahmenfarbe Webseiten-Rahmenfarbe
Kann im Allgemeinen in zwei Kategorien unterteilt werden: Box-Shadow und Textshadow.
CSS3 Box-Shadow und Textshadow können wie folgt geschrieben werden: Box-Shadow:Apx Bpx Cpx #xxx;
Apx = x-Achse
Bpx = y-Achse
Cpx = Projektionslänge
#XXX = die gleiche Farbe wie üblich
Wenn wir das verstehen, können wir beginnen, es auf folgende Weise zu erleben...
Browserkompatibilität:
In der vorherigen Einführung haben wir angegeben, dass nicht alle Browser alle Browser unterstützt CSS3. Der beste Browser, der CSS3-Schatteneffekte unterstützt, ist Safari, was bedeutet, dass wir jetzt nur das Präfix Knife-Webkit verwenden müssen.

#boxShadow{ border: 5px solid #111; -webkit-box-shadow: 5px 5px 7px #999; -webkit-border-right-radius: 15px; padding: inherit; width: 590px;

FireFox (3.0.5) - [FireFox (3.1 PreAlpha) kompatibel]

Google Chrome (1.0.154.)

Google Chrome (2.0.156.)( Unterstützt (nicht so gut)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

Einfacher Textschatten:

.textShadowSingle { Schriftgröße: 3.2em; Textschatten: 3px 3px 7px #111; Textausrichtung: Mitte; Unterstützung für Browserserver:

FireFox (3.0.5) – [FireFox (3.1 PreAlpha) kompatibel]

Google Chrome (1.0.154.)

Google Chrome (2.0.154.) 156 .) (Unterstützung ist nicht sehr gut)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

Multiple TextShadow

.textShadowMultiple { Schriftgröße: 3,2em; Textschatten: 0px -11px 10px #C60, 0px -3px 9px #FF0 ; text-align: center; padding: 10px 0px 5px 0px; 🎜>Google Chrome (1.0.154.)

Google Chrome (2.0.156.) (Unterstützung ist nicht sehr gut)

Internet Explorer (IE7/ IE8 RC1)

Opera (9.6)

Safari (3.2.1, Windows)

Das Obige ist der Inhalt des CSS3-Tutorials (4): Webseitenrahmen und Webseitentextshadow_css3_CSS_ Webseite Weitere Informationen Für verwandte Inhalte folgen Sie bitte der chinesischen PHP-Website (www.php.cn)!