Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo)

藏色散人
Freigeben: 2018-08-10 16:27:03
Original
5523 Leute haben es durchsucht

In diesem Artikel werden Ihnen die Auswirkungen schöner CSS-Schriftstile vorgestellt. Ich hoffe, es hilft Freunden in Not.

Ein spezifisches Codebeispiel für den CSS-Schriftschatteneffekt ist wie folgt:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css字体阴影测试一</title>
    <meta charset="UTF-8">
    <style type="text/css">
        h3.a {text-shadow: 0.1em 0.1em 0.05em #333
 }
        h3.b {text-shadow: 0.1em 0.1em 0.2em black}
    </style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>
Nach dem Login kopieren

Der Effekt des obigen Codes ist wie folgt:

Wie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo)

CSS-Schriftschatteneffekt 2 spezifische Codebeispiele lauten wie folgt:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css字体阴影测试一</title>
    <meta charset="UTF-8">
    <style type="text/css">
        h3{color: #1b5c16;}
        h3.a {text-shadow: -1px -1px white, 1px 1px #333}
        h3.b {text-shadow: 1px 1px white, -1px -1px #444}
    </style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>
Nach dem Login kopieren

Der Effekt des obigen Codes ist wie folgt:

Wie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo)

Hinweis: Alle gängigen Browser unterstützen beide das Text-Shadow-Attribut. Internet Explorer 9 und frühere Browser unterstützen das text-shadow-Attribut nicht.

Die Eigenschaft text-shadow fügt dem Text einen oder mehrere Schatten hinzu. Bei dieser Eigenschaft handelt es sich um eine durch Kommas getrennte Liste von Farbtönen, wobei jeder Farbton mit zwei oder drei Längenwerten und einem optionalen Farbwert angegeben wird. Die weggelassene Länge ist 0.

Mögliche Werte für sein Attribut:

h-shadow Erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt.

V-Shadow erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt.

unschärfe Optional. Verschwommene Distanz.

Farbe optional. Die Farbe des Schattens.


Das obige ist der detaillierte Inhalt vonWie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage