Wie erziele ich mithilfe von CSS-Attributen einen Schriftschatteneffekt? (Code-Demo)-CSS-Tutorial-php.cn

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

藏色散人

Freigeben： 2018-08-10 16:27:03

Original

5497 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!