Effets de texte CSS3

1. Comment utiliser l'attribut text-shadow

Comment utiliser l'attribut text-shadow est la suivante.

text-shadow : longueur longueur longueur couleur

Parmi elles, les trois premières longueurs font référence à la distance horizontale de l'ombre au texte, à la distance verticale de l'ombre au texte et à la rayon de flou de l'ombre, couleur Désigne la couleur de l'ombre.

Ce qui suit est un exemple d'utilisation de l'attribut text-shadow. Dans cet exemple, un bloc de texte rouge est ombré de gris. Les distances horizontale et verticale entre l'ombre et le texte sont toutes deux de 5 pixels.

.wrap{ text-shadow:5px 5px 5px gray; color:red;font-size:50px; font-weight:bold; }

2. Spécifiez plusieurs ombres

Vous pouvez utiliser l'attribut text-shadow pour spécifier plusieurs ombres pour le texte et utiliser des couleurs différentes pour chaque ombre.

Lorsque vous spécifiez plusieurs ombres, utilisez des virgules pour séparer plusieurs ombres. Jusqu'à présent, seuls les navigateurs Firefox, Chrome et Opera prennent en charge cette fonctionnalité.

L'exemple de code

spécifie les ombres orange, jaune et verte pour le texte dans l'ordre, et spécifie également les positions appropriées pour ces ombres.

.wrap { text-shadow:10px 10px #f39800,40px 35px #fff100,70px 60px #c0ff00; color:navy; font-size:50px; font-weight:bold; }

Envelopper automatiquement

Si le mot est trop long, il ne peut pas dépasser une certaine zone :

QQ图片20161021131720.png

En CSS3, le mot Attribut -wrap Vous permet d'autoriser le texte à forcer le retour à la ligne - même si cela signifie diviser les mots :

QQ截图20161021131825.png

Permet aux mots longs d'être divisés et renvoyés à la ligne suivante :

p {word-wrap:break-word;}

Nouveau texteAttributs >CSS

hanging-ponctuation spécifie si les caractères de ponctuation se trouvent en dehors du filaire. 3PUNCTUATION-TRIM précise s'il faut couper le caractère de ponctuation. 3 Paramètre Text-Align-Last sur la façon d'aligner la dernière ligne ou avant les runes obligatoires. 3

text-emphasis Applique une marque d'accentuation et la couleur de premier plan de la marque d'accentuation au texte de l'élément.

text-justify spécifie la méthode d'alignement utilisée lorsque text-align est défini sur "justify". 3

Text-Overflow stipule ce qui se passe lorsque le texte débordant contient des éléments. 3

Text-shadow ajoute des ombres au texte. 3

Text-WRAP précise le texte du texte. 3

Word-Break régule les textes non chinois-japonais et coréens. 3

Le retour à la ligne permet de diviser et de passer à la ligne suivante.
Formation continue
||

文字阴影效果

注意: Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow属性.

soumettre Réinitialiser le code
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!