Wie füge ich Schatten zu Schriftarten und Elementen in CSS hinzu? Text-Shadow- und Box-Shadow-Implementierung

In diesem Artikel erfahren Sie, wie Sie in CSS Schatten zu Schriftarten und Elementen hinzufügen. Text-Shadow- und Box-Shadow-Implementierung. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Syntax:

Objektauswahl {text-shadow:X-Achsen-Versatz Y-Achsen-Versatz Schattenunschärferadius Schattenfarbe}

Hinweis : Textschatten kann eine oder mehrere Projektionen verwenden. Wenn mehrere Projektionen verwendet werden, müssen diese durch Kommas getrennt werden.
2. Wert:

Das Box-Shadow-Attribut kann bis zu 6 Parametereinstellungen haben und ihre jeweiligen Werte sind:

　(1) Schatten Horizontaler Versatz: Bezieht sich auf den horizontalen Versatz des Schattens. Wenn der Wert positiv ist, liegt der Schatten auf der rechten Seite des Objekts die linke Seite des Objekts; (2) Der vertikale Versatz des Schattens: Bezieht sich auf den vertikalen Versatz des Schattens liegt am unteren Rand des Objekts. Andernfalls ist der Wert negativ. Wenn sich der Schatten am oberen Rand des Objekts befindet, ist dieser Parameter optional , aber sein Wert kann nur positiv sein. Wenn der Wert größer ist, wird der Schatten unscharf, andernfalls wird der Schatten klarer. Wenn der Wert 0 ist, bedeutet dies, dass der Schatten keinen Unschärfeeffekt hat. (4) Schattenfarbe: Dieser Parameter ist optional. Wenn keine Farbe festgelegt ist, verwendet der Browser die Standardfarbe, jedoch jeden Browser Die Standardfarben sind unterschiedlich, insbesondere Safari- und Chrome-Browser unter dem Webkit-Kernel. Es wird empfohlen, diesen Parameter nicht wegzulassen war im Grunde überall Bilder. Bis zum Aufkommen von CSS3 wurde unsere Methode zur Erstellung von Textschatten weiter verbessert. Tatsächlich tauchte text-shadow in CSS2 auf, wurde aber in CSS2.0 nicht rücksichtslos aufgegeben. Jetzt wird es wieder in CSS3 verwendet. Dies zeigt, dass text-shadow immer noch unserer Aufmerksamkeit würdig ist. Als qualifiziertes Front-End-Personal muss die Beherrschung des Textschattens daher höchste Priorität haben.

CSS3 Festlegen des Textschatteneffekts und Festlegen des Schatteneffekts für den Textschriftart-Textschattenstil. Ursprünglich war dieses Attribut auch in der CSS2-Version vorhanden, aber in CSS3 wird der Textschatten-Textschatten erneut zur Anreicherung angewendet das Textlayout und verschönern Sie es.

3. CSS3-Wörter und Syntax

CSS3-Wörter: text-shadow

Grammatikstruktur:

text-shadow: 5px 2px 6px black;

5px steht für: The Der Schatten wird 5 Pixel vom Text entfernt angezeigt.

2 Pixel bedeutet: Der Schatten wird 2 Pixel vom Text entfernt angezeigt. 6 Pixel bedeutet: Der Schattengrößenbereich.

Schwarz bedeutet : Die Schattenfarbe ist schwarz

Zum Beispiel:

<p class="orange" id="all"> 
    <h1>smile微笑</h1> 
</p>

　　　　 body {
				width: 100%;
				margin: 0px auto;
				padding: 0px;
				font-family: "微软雅黑";
			}
			
			.orange {				
				background-color: #f8f8f8;
				padding: 30px;				
			}
			
			.orange h1 {
				font: normal 32px 微软雅黑, sans-serif;
				padding: 20px 0 20px 40px;
				text-align: center;
				display: block;
				color: #FFF;
				background-color: lightskyblue;
				border-radius: 5px;
				text-shadow: 5px 2px 6px #000;//text-show是字的阴影
				box-shadow: 5px 2px 6px #000;//box-show是盒子的阴影
			}        　　

Der Effekt ist wie folgt:

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

CSS-Video-Tutorial

,

CSS3-Video-Tutorial

!

Verwandte Empfehlungen:

PHP-Video-Tutorial zur öffentlichen Wohlfahrtsschulung

CSS-Online-Handbuch

CSS3 Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonWie füge ich Schatten zu Schriftarten und Elementen in CSS hinzu? Text-Shadow- und Box-Shadow-Implementierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!