Comment obtenir un effet d'ombre de police à l'aide des attributs CSS ? (démo de code)-tutoriel CSS-php.cn

Comment obtenir un effet d'ombre de police à l'aide des attributs CSS ? (démo de code)

藏色散人

Libérer： 2018-08-10 16:27:03

original

5517 Les gens l'ont consulté

Cet article vous présentera les effets de magnifiques styles de police CSS. J'espère que cela aidera les amis dans le besoin.

L'exemple de code spécifique de l'effet d'ombre de police CSS est le suivant :

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

Copier après la connexion

L'effet du code ci-dessus est le suivant :

Comment obtenir un effet dombre de police à laide des attributs CSS ? (démo de code)

Effet d'ombre de police CSS 2 exemples de code spécifiques sont les suivants :

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

Copier après la connexion

L'effet du code ci-dessus est le suivant :

Comment obtenir un effet dombre de police à laide des attributs CSS ? (démo de code)

Remarque : tous les principaux navigateurs prennent en charge l'attribut text-shadow. Internet Explorer 9 et les navigateurs antérieurs ne prennent pas en charge l'attribut text-shadow.

La propriété text-shadow ajoute une ou plusieurs ombres au texte. Cette propriété est une liste de nuances séparées par des virgules, chaque nuance étant spécifiée avec deux ou trois valeurs de longueur et une valeur de couleur facultative. La longueur omise est 0.

Valeurs possibles pour son attribut :

h-shadow Obligatoire. La position de l'ombre horizontale. Les valeurs négatives sont autorisées.

v-shadow Obligatoire. La position de l'ombre verticale. Les valeurs négatives sont autorisées.

flou Facultatif. Distance floue.

couleur en option. La couleur de l'ombre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!