La bordure de police CSS est une technique utilisée pour créer un contour en forme de bordure autour des caractères de texte HTML. Cette technique est utilisée pour améliorer la visibilité ou ajouter un effet décoratif au texte. Ceci peut être réalisé en utilisant la propriété text-stroke, qui permet de personnaliser l'apparence du texte en ajoutant une bordure autour de celui-ci.
Comment appliquer une bordure de police en CSS
Il existe deux méthodes pour appliquer des bordures de police aux éléments de texte en HTML :
Table des matières
Étudions ces propriétés CSS en détail et comprenons comment elles sont utilisées pour placer des bordures de texte en HTML.
Utilisation de la propriété text-shadow
Le Propriété Text-Shadow en CSS ajoute un effet d'ombre au texte, apportant profondeur et emphase. Il prend des paramètres pour les décalages horizontaux et verticaux, le rayon de flou et la couleur, permettant aux concepteurs de créer divers effets d'ombre de texte pour un attrait visuel amélioré.
Syntaxe:
text-shadow: h-shadow v-shadow blur-radius color;>
Valeurs des propriétés :
La propriété text-shadow accepte de nombreuses valeurs, certaines d'entre elles sont mentionnées dans le tableau ci-dessous.
| Valeur de la propriété | Description |
|---|---|
h-shadow> | Définit l'ombre horizontale autour du texte. |
v-shadow> | Définit l'ombre verticale autour du texte. |
blur-radius> | Définit le rayon de flou autour de l'ombre du texte. |
color> | Définit la couleur de l'ombre du texte. |
none> | Ne définit rien autour du texte (pas d'ombre). |
initial> | Définit l'ombre du texte à sa valeur initiale par défaut. |
inherit> | Hérite des valeurs de propriété de son élément parent. |
Valeur de retour :
Il renvoie une bordure/ombre de police autour du texte.
Exemples de bordures de police
Exemple 1: Cet exemple utilise la propriété text-shadow pour créer une ombre sur le texte.
travail informatiqueHTML
Titre de la propriété CSS text-shadow><style>h1 {text-shadow : 0 0 3px #FF0000, 0 0 5px #0000FF ; } style> tête> <body> <h1>techcodeview.comh1> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="ombre de texte CSS"><p dir='ltr'> <b> <strong>Exemple 2 :</strong> </b> <span>Cet exemple utilise la propriété text-shadow pour créer du texte avec bordure.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titre de la propriété CSS text-shadow><!-- Style to use text-shadow property --> <style>.GFG { couleur : blanc ; taille de police : 50 px ; texte-ombre : -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000 ; } style> tête> <body> <p>techcodeview.comp> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="texte bordé CSS"><h2 id='using-textstroke-property'> <b> <strong>Utilisation de la propriété Text-Stroke</strong> </b> </h2><p dir='ltr'><span>Le</span> <span>Propriété Text-Stroke</span> <span>est utilisé pour ajouter un trait au texte. Cette propriété peut être utilisée pour modifier la largeur et la couleur du texte. Cette propriété est prise en charge en utilisant le préfixe -webkit-.</span></p> <p dir='ltr'> <b> <strong>Syntaxe:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Exemple</strong> </b> </h3><p dir='ltr'><span>Cet exemple utilise la propriété text-stroke pour créer du texte avec bordure.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Titre de la propriété CSS Text-Stroke><!-- Style to use text-stroke property --> <style>.GFG { couleur : blanc ; taille de police : 50 px ; -webkit-text-trait-largeur : 1 px ; -webkit-text-trait-couleur : noir ; } style> tête> <body> <p>techcodeview.comp> corps> html>></pre> </code> <p dir='ltr'> <b> <strong>Sortir:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Navigateur pris en charge :</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Bord</span> <span> </span> <span>12</span></li><li value='3'> <span>Firefox</span> <span>1</span></li><li value='4'> <span>Opéra</span> <span>3.5</span></li><li value='5'> <span>Safari</span> <span>1</span></li></ul><p dir='ltr'><span>CSS est la base des pages Web et est utilisé pour le développement de pages Web en stylisant des sites Web et des applications Web. Vous pouvez apprendre le CSS à partir de zéro en suivant ceci</span> <span>Tutoriel CSS</span> <span>et</span> <span>Exemples CSS</span> <span>.</span></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/numpy-tutorial/">Tutoriel Numpy</a> </li><li> <a href="/python-projects/">Projets Python</a> </li><li> <a href="/physics-difference-between/">Physique-Différence-Entre</a> </li><li> <a href="/rxjs-tutorial/">Tutoriel Rxjs</a> </li><li> <a href="/python-testing/">Tests Python</a> </li><li> <a href="/javascript-dsa/">Javascript-Dsa</a> </li><li> <a href="/max-flow/">Débit Maximum</a> </li><li> <a href="/cpp-bitset/">Jeu De Bits Cpp</a> </li><li> <a href="/java-overloading/">Surcharge Java</a> </li><li> <a href="/java-class-object/">Classe Java Et Objet</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Différentes façons de parcourir les lignes dans Pandas Dataframe</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portail informatique pour les geeks. Il contient des articles sur l'informatique et la programmation bien écrits, bien pensés et bien expliqués, des quiz et des questions pratiques/de programmation compétitive/d'entretien d'entreprise.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/different-ways-iterate-over-rows-pandas-dataframe"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/open-file-linux">Ouvrir un fichier sous Linux</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/booting-operating-system">Démarrage dans le système d'exploitation</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-long-before-sunrise-does-sky-start-lighten">Combien de temps avant le lever du soleil le ciel commence-t-il à s'éclaircir ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-ipl">Quelle est la forme complète de l'IPL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-20-cat/">C++20</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/snipping-tool-ubuntu">outil de capture dans Ubuntu</a>
</li><li><a href="/add-elements-array-java">java ajouter à un tableau</a>
</li><li><a href="/java-long-string">long pour chaîner Java</a>
</li><li><a href="/javascript-array">tableau js</a>
</li><li><a href="/mvc-architecture-java">java mvc</a>
</li><li><a href="/synchronization-java">synchronisation des threads</a>
</li><li><a href="/difference-between-type-casting">conversion et conversion de type Java</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tous Les Droits Sont Réservés | <a href="//hu.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>