La vora del tipus de lletra CSS és una tècnica utilitzada per crear un contorn semblant a una vora al voltant dels caràcters de text HTML. Aquesta tècnica s'utilitza per millorar la visibilitat o afegir un efecte decoratiu al text. Això es pot aconseguir mitjançant la propietat text-stroke, que permet personalitzar l'aparença del text afegint una vora al seu voltant.
Com aplicar la vora del tipus de lletra en CSS
Hi ha dos mètodes per aplicar vores de font als elements de text en HTML:
Taula de contingut
Estudiem aquestes propietats CSS en detall i entenem com s'utilitzen per posar vores de text en HTML.
Utilitzant la propietat text-shadow
El Propietat Text-Shadow en CSS afegeix un efecte d'ombra al text, proporcionant profunditat i èmfasi. Pren paràmetres per a desplaçaments horitzontals i verticals, radi de desenfocament i color, cosa que permet als dissenyadors crear diversos efectes d'ombra de text per millorar l'atractiu visual.
Sintaxi:
text-shadow: h-shadow v-shadow blur-radius color;>
Valors de propietat :
La propietat text-shadow accepta molts valors, alguns d'ells s'esmenten a la taula següent.
| Valor de la propietat | Descripció |
|---|---|
h-shadow> | Estableix l'ombra horitzontal al voltant del text. |
v-shadow> | Estableix l'ombra vertical al voltant del text. |
blur-radius> | Estableix el radi de desenfocament al voltant de l'ombra del text. |
color> | Estableix el color de l'ombra del text. |
none> | No estableix res al voltant del text (sense ombra). |
initial> | Estableix l'ombra del text al seu valor inicial predeterminat. |
inherit> | Hereta els valors de la propietat del seu element pare. |
Valor de retorn:
Retorna una vora/ombra de tipus de lletra al voltant del text.
Exemples de vora de lletra
Exemple 1: Aquest exemple utilitza la propietat text-shadow per crear ombra al text.
subratlla el text amb csshtml
CSS text-shadow property title><style>h1 { text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } estil> cap> <body> <h1>techcodeview.comh1> cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="CSS d'ombra de text"><p dir='ltr'> <b> <strong>Exemple 2:</strong> </b> <span>Aquest exemple utilitza la propietat text-shadow per crear text amb vores.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>CSS text-shadow property title><!-- Style to use text-shadow property --> <style>.GFG { color: blanc; mida de la lletra: 50px; text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } estil> cap> <body> <p>techcodeview.comp> cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="text amb vores CSS"><h2 id='using-textstroke-property'> <b> <strong>Utilitzant la propietat de traç de text</strong> </b> </h2><p dir='ltr'><span>El</span> <span>Propietat de traç de text</span> <span>s'utilitza per afegir un traç al text. Aquesta propietat es pot utilitzar per canviar l'amplada i el color del text. Aquesta propietat és compatible amb l'ús del prefix -webkit-.</span></p> <p dir='ltr'> <b> <strong>Sintaxi:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Exemple</strong> </b> </h3><p dir='ltr'><span>Aquest exemple utilitza la propietat text-stroke per crear text amb vores.</span></p>html<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Títol de propietat de traç de text CSS><!-- Style to use text-stroke property --> <style>.GFG { color: blanc; mida de la lletra: 50px; -webkit-text-stroke-width: 1px; -webkit-text-traç-color: negre; } estil> cap> <body> <p>techcodeview.comp> cos> html>>></pre> </code> <p dir='ltr'> <b> <strong>Sortida:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border-3.webp' alt=""><p dir='ltr'> <b> <strong>Navegador compatible:</strong> </b> </p> <ul><li value='1'> <span>Google Chrome</span> <span>1</span></li><li value='2'> <span>Edge</span> <span> </span> <span>12</span></li><li value='3'> <span>Firefox</span> <span>1</span></li><li value='4'> <span>Òpera</span> <span>3.5</span></li><li value='5'> <span>Safari</span> <span>1</span></li></ul><p dir='ltr'><span>CSS és la base de les pàgines web, s'utilitza per al desenvolupament de pàgines web dissenyant llocs web i aplicacions web. Podeu aprendre CSS des de principis seguint això</span> <span>Tutorial CSS</span> <span>i</span> <span>Exemples de 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="//changelesschoir.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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/big-endian/">Big Endian</a> </li><li> <a href="/cobol-tutorial/">Tutorial Cobol</a> </li><li> <a href="/dijkstra/">Dijkstra</a> </li><li> <a href="/java-regular-expression/">Java-Expressió-Regular</a> </li><li> <a href="/python-pip/">Python-Pip</a> </li><li> <a href="/cpp-functions/">Cpp-Funcions</a> </li><li> <a href="/mockito-tutorial/">Tutorial De Mockito</a> </li><li> <a href="/tutorials/">Tutorials</a> </li><li> <a href="/google/">Google</a> </li><li> <a href="/physics/">Física</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="//changelesschoir.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Els 10 millors navegadors d'Android del 2024</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Descobriu els millors navegadors d'Android del 2024 amb el millor rendiment amb la nostra llista seleccionada de les 10 millors opcions. Millora la teva experiència de navegació mòbil amb els millors navegadors d'Android disponibles el 2024.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/10-best-android-browsers-2024"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/mvc-design-pattern">Patró de disseny MVC</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/is-digital-sat-easier-131484">El SAT digital és més fàcil o més difícil que la versió en paper?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-ap-physics-2-equation-sheet-1311498">Què és el full d'equacions AP Physics 2? Una avaria completa</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-if-else-statement">Declaració If-else de Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-vertically-center-text-with-css">Com centrar verticalment el text amb CSS?</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/negation-discrete-mathematics">negació matemàtiques discretes</a>
</li><li><a href="/javascript-string-replace-method">reemplaça la cadena javascript</a>
</li><li><a href="/save-json-file-python">escriviu json al fitxer python</a>
</li><li><a href="/java-convert-int-double">convertint int a doble java</a>
</li><li><a href="/boto3-python-module">boto3</a>
</li><li><a href="/roman-number-1-100">xifra romana de l'1 al 100</a>
</li><li><a href="/java-string-substring">subcadena del mètode 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 Tots Els Drets Reservats | <a href="//lv.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>