Maison > interface Web > tutoriel CSS > CSS peut-il ajouter une bordure directement au texte ?

CSS peut-il ajouter une bordure directement au texte ?

Susan Sarandon
Libérer: 2024-12-06 11:12:13
original
659 Les gens l'ont consulté

Can CSS Add a Border Directly to Text?

CSS peut-il ajouter une bordure au texte ?

L'avènement de CSS3 a introduit une pléthore d'options de bordure. Cependant, la possibilité d’ajouter une bordure directement au texte reste difficile à atteindre. Malgré l'absence d'une propriété désignée à cet effet, il existe des moyens d'obtenir un effet similaire en utilisant des fonctionnalités CSS existantes ou des propriétés expérimentales.

Propriété expérimentale CSS3

CSS3 introduit une propriété expérimentale appelée text-stroke, qui permet aux utilisateurs d'appliquer une bordure autour du texte. Bien qu'il ne soit pas pris en charge par tous les navigateurs (nécessitant le préfixe -webkit dans certains cas), text-stroke fournit une solution directe pour ajouter une bordure au texte.

Exemple de code :

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans;
    color: yellow;
}
Copier après la connexion
<h1>Hello World</h1>
Copier après la connexion

L'application d'un trait de texte à un titre, comme indiqué ci-dessus, crée une bordure noire unie autour du texte, ce qui donne un style Twitter. effet.

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal