Maison > interface Web > Questions et réponses frontales > Quel est le code CSS3 pour ajouter une ombre au titre

Quel est le code CSS3 pour ajouter une ombre au titre

WBOY
Libérer: 2022-04-20 18:05:54
original
1646 Les gens l'ont consulté

Le code est "Titre élément {text-shadow : position de l'ombre horizontale position de l'ombre verticale distance de flou couleur de l'ombre}" ; où l'attribut "text-shadow" est utilisé pour ajouter une ombre au texte, la position de l'ombre horizontale et verticale. position de l'ombre dans cet attribut Lorsque la valeur de est définie sur une valeur négative, la direction de l'ombre sera dans la direction négative de l'axe des x et dans la direction positive de l'axe des y.

Quel est le code CSS3 pour ajouter une ombre au titre

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quel est le code CSS3 pour ajouter une ombre au titre

La propriété text-shadow est appliquée au texte de l'ombre.

La syntaxe est :

text-shadow: h-shadow v-shadow blur color;
Copier après la connexion

La propriété text-shadow connecte un ou plusieurs textes fantômes. La propriété est une ombre, spécifiant toutes les 2 ou 3 valeurs de longueur et une valeur de couleur facultative séparées par des virgules. La longueur expirée est 0.

Les paramètres sont exprimés comme suit :

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

  • v-shadow requis. 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.

L'exemple est le suivant :

<html>
<head>
<meta charset="utf-8"> 
<title>123</title>
<style>
h1 {text-shadow:2px 2px 8px #FF0000;}
</style>
</head>
<body>
<h1>Text-shadow with blur effect</h1>
<p><b>注意:</b>IE 9及更早版本的浏览器不支持 text-shadow 属性.</p>
</body>
</html>
Copier après la connexion

Résultat de sortie :

Quel est le code CSS3 pour ajouter une ombre au titre

(Partage vidéo d'apprentissage : tutoriel vidéo CSS)

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal