El borde de la fuente CSS es una técnica utilizada para crear un contorno en forma de borde alrededor de caracteres de texto HTML. Esta técnica se utiliza para realzar la visibilidad o agregar un efecto decorativo al texto. Esto se puede lograr usando la propiedad de trazo de texto, que permite personalizar la apariencia del texto agregando un borde a su alrededor.
Cómo aplicar el borde de fuente en CSS
Existen dos métodos para aplicar bordes de fuente a elementos de texto en HTML:
Tabla de contenidos
Estudiemos estas propiedades CSS en detalle y comprendamos cómo se usan para colocar bordes de texto en HTML.
Usando la propiedad de sombra de texto
El Propiedad de sombra de texto en CSS agrega un efecto de sombra al texto, proporcionando profundidad y énfasis. Toma parámetros para desplazamientos horizontales y verticales, radio de desenfoque y color, lo que permite a los diseñadores crear varios efectos de sombra de texto para mejorar el atractivo visual.
Sintaxis:
text-shadow: h-shadow v-shadow blur-radius color;>
Valores de propiedad :
La propiedad text-shadow acepta muchos valores, algunos de ellos se mencionan en la siguiente tabla.
| El valor de la propiedad | Descripción |
|---|---|
h-shadow> | Establece la sombra horizontal alrededor del texto. |
v-shadow> | Establece la sombra vertical alrededor del texto. |
blur-radius> | Establece el radio de desenfoque alrededor de la sombra del texto. |
color> | Establece el color de la sombra del texto. |
none> | No establece nada alrededor del texto (sin sombra). |
initial> | Establece la sombra del texto en su valor inicial predeterminado. |
inherit> | Hereda los valores de propiedad de su elemento padre. |
Valor de retorno:
Devuelve un borde/sombra de fuente alrededor del texto.
Ejemplos de bordes de fuentes
Ejemplo 1: Este ejemplo utiliza la propiedad text-shadow para crear sombra en el texto.
execlpHTML
Título de propiedad de sombra de texto CSS><style>h1 { sombra de texto: 0 0 3px #FF0000, 0 0 5px #0000FF; } estilo> cabeza> <body> <h1>techcodeview.comh1>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> <span> </span></p> <img src='//techcodeview.com/img/picked/01/css-font-border.webp' alt="CSS de sombra de texto"><p dir='ltr'> <b> <strong>Ejemplo 2:</strong> </b> <span>Este ejemplo utiliza la propiedad text-shadow para crear texto con bordes.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Título de propiedad de sombra de texto CSS><!-- Style to use text-shadow property --> <style>.GFG {color: blanco; tamaño de fuente: 50px; sombra de texto: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; } estilo> cabeza> <body> <p>techcodeview.comp>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</strong> </b> </p> <img src='//techcodeview.com/img/picked/01/css-font-border-2.webp' alt="texto con borde CSS"><h2 id='using-textstroke-property'> <b> <strong>Usando la propiedad de trazo de texto</strong> </b> </h2><p dir='ltr'><span>El</span> <span>Propiedad de trazo de texto</span> <span>se utiliza para agregar trazo al texto. Esta propiedad se puede utilizar para cambiar el ancho y el color del texto. Esta propiedad se admite mediante el uso del prefijo -webkit-.</span></p> <p dir='ltr'> <b> <strong>Sintaxis:</strong> </b> </p> <pre class='hljs'>-webkit-text-stroke: width color;></pre><h3> <b> <strong>Ejemplo</strong> </b> </h3><p dir='ltr'><span>Este ejemplo utiliza la propiedad de trazo de texto para crear texto con borde.</span></p>HTML<code class='hljs'> <pre class='hljs'><!DOCTYPE html> <html> <head> <title>Título de propiedad de trazo de texto CSS><!-- Style to use text-stroke property --> <style>.GFG {color: blanco; tamaño de fuente: 50px; -webkit-texto-trazo-ancho: 1px; -webkit-text-trazo-color: negro; } estilo> cabeza> <body> <p>techcodeview.comp>cuerpo>html>></pre> </code> <p dir='ltr'> <b> <strong>Producción:</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>Borde</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 es la base de las páginas web y se utiliza para el desarrollo de páginas web al diseñar sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo esto</span> <span>Tutorial CSS</span> <span>y</span> <span>Ejemplos 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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/counting-sort/">Ordenar-Contar</a> </li><li> <a href="/python-basics/">Conceptos Básicos De Python</a> </li><li> <a href="/vba-tutorial/">Tutorial De Vba</a> </li><li> <a href="/javascript-date/">Fecha-Javascript</a> </li><li> <a href="/xml-tutorial/">Tutorial Xml</a> </li><li> <a href="/basic-coding-problems/">Problemas Básicos De Codificación</a> </li><li> <a href="/ecology/">Ecología</a> </li><li> <a href="/blog/">Blog</a> </li><li> <a href="/design-pattern/">Patrón De Diseño</a> </li><li> <a href="/java-constructors/">Constructores De Java</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">Compruebe si el elemento existe en la lista en Python</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<p> <i class="fa fa-quote-left"></i> Un portal de informática para geeks. Contiene artículos de programación y ciencias de la computación bien escritos, bien pensados y bien explicados, cuestionarios y preguntas de práctica/programación competitiva/entrevistas de empresa.</p>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/check-if-element-exists-list-python"> <i class="fa fa-external-link"></i> Leer Más</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Artículos De Interés</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/uninstall-reinstall-angular-cli">Desinstale y reinstale Angular CLI</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-date-format">Formato de fecha Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/deleting-cookie-javascript">Eliminar una cookie en JavaScript</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-concatenate-two-strings-python">Cómo concatenar dos cadenas en Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/pandas-dataframe-groupby-method">Método Pandas dataframe.groupby()</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">Entradas Populares</h2>
<div class="content">
<ul class="list"> <li><a href="/public-vs-private-java">Java privado vs público</a>
</li><li><a href="/what-is-full-form-xd">que significa esto xd</a>
</li><li><a href="/java-each-loop-enhanced">mejorado para bucle java</a>
</li><li><a href="/java-convert-boolean-string">cadena booleana java</a>
</li><li><a href="/java-while-loop">java mientras condición</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 Todos Los Derechos Reservados | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Descargo De Responsabilidad</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Acerca De Nosotros</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privacidad</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>