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><!--//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="/image-tools/">Imatge-Eines</a> </li><li> <a href="/java-class-object/">Classe Java I Objecte</a> </li><li> <a href="/knapsack/">Motxilla</a> </li><li> <a href="/java-hashmap/">Java-Hashmap</a> </li><li> <a href="/python-selenium-exercises/">Python Selenium-Exercicis</a> </li><li> <a href="/adobe-illustrator/">Adobe Illustrator</a> </li><li> <a href="/maths-class-12-cat/">Matemàtiques-Classe-12</a> </li><li> <a href="/big-endian/">Big Endian</a> </li><li> <a href="/arithmetic-maq/">Aritmètica - Maq</a> </li><li> <a href="/product-management-qna/">Gestió De Productes Qna</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Conceptes bàsics del maneig de fitxers en C</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portal d'informàtica per a frikis. Conté articles d'informàtica i programació ben escrits, ben pensats i ben explicats, proves i preguntes pràctiques/programació competitiva/entrevistes d'empresa.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/basics-file-handling-c"> <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="/print-all-subarrays-with-0-sum">Imprimiu tots els subarrays amb 0 suma</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complex-numbers">Nombres complexos</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-string-equals">La cadena Java és igual a ()</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-rational-number-1311164">Què és un nombre racional? Definició i exemples</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/whats-good-psat-score-131726">Quina és una bona puntuació PSAT per a un estudiant de segon?</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="/c-int-string">convertir un int en una cadena c++</a>
</li><li><a href="/java-string-substring">mètode de subcadenes en java</a>
</li><li><a href="/how-sort-arraylist-java">Arraylist java sort</a>
</li><li><a href="/merge-sort-algorithm">algorisme de mergesort</a>
</li><li><a href="/what-is-insert-key-laptop">clau ins</a>
</li><li><a href="/java-convert-char-string">com convertir char a string java</a>
</li><li><a href="/when-was-first-computer-invented">any que es va inventar l'ordinador</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="//pt.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>
</body>
</html>