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 unterCSS-Video-Tutorial
,CSS3-Video-Tutorial
!
Verwandte Empfehlungen:
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!
