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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/chrome/">Chrome</a> </li><li> <a href="/maths-class-9-cat/">Maths-Classe-9</a> </li><li> <a href="/c-dynamic-memory-allocation/">Allocation De Mémoire Dynamique C</a> </li><li> <a href="/cpp-operator/">Opérateur Cpp</a> </li><li> <a href="/java-timestamp-class/">Classe D'horodatage Java</a> </li><li> <a href="/queue/">File d'attente</a> </li><li> <a href="/listicles/">Listes</a> </li><li> <a href="/merge-sort/">Tri Par Fusion</a> </li><li> <a href="/java-servlet/">Servlet Java</a> </li><li> <a href="/cpp-advanced/">Cpp-Avancé</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Les statistiques AP sont-elles difficiles ? Une discussion d'experts</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Les statistiques AP sont-elles difficiles ? Nous discutons des facteurs affectant la difficulté des statistiques AP pour vous aider à décider si c'est une bonne classe pour vous.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/is-ap-statistics-hard-131738"> <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="/python/">Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-much-can-you-send-venmo">Combien pouvez-vous envoyer sur Venmo ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/concept-convolution">Concept de convolution</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-full-form-acp">Quelle est la forme complète de l’ACP ?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-string-append">Ajout de chaîne C++()</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="/network-operating-system">système d'exploitation réseau</a>
</li><li><a href="/java-do-while-loop">java fait pendant</a>
</li><li><a href="/javascript-settimeout-method">js settimeout</a>
</li><li><a href="/java-string">classe de chaîne Java</a>
</li><li><a href="/roman-number-1-100">1 à 100 romains non</a>
</li><li><a href="/ubuntu-ipconfig">ipconfig gratuit</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="//bg.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>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed;
bottom: 25px;
right: 25px;
z-index: 9999;
opacity: 0;
visibility: hidden;
background-color: #213141;
color: white;
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover {
background-color: #555;
}
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>