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 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="">Categoría</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/parents/">Padres</a> </li><li> <a href="/binary-tree/">Árbol Binario</a> </li><li> <a href="/maths-calculators/">Calculadoras-Matemáticas</a> </li><li> <a href="/cell-signaling/">Señal Telefónica</a> </li><li> <a href="/control-systems/">Sistemas De Control</a> </li><li> <a href="/artificial-neural-network/">Red Neuronal Artificial</a> </li><li> <a href="/stack/">Pila</a> </li><li> <a href="/linux-command/">Comando-Linux</a> </li><li> <a href="/physics-class-12-cat/">Física-Clase-12</a> </li><li> <a href="/object-oriented-design/">Diseño Orientado A Objetos</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">Redondeando errores en Java</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Compactar muchos números reales infinitos en un número finito de bits requiere una representación aproximada. La mayoría de los programas almacenan el resultado de cálculos de números enteros a 32 o 64 bits como máximo. Dado un número fijo de bits, la mayoría de los cálculos con números reales producirán cantidades que no se pueden representar exactamente usando tantos bits. Por lo tanto, el resultado de un cálculo de punto flotante a menudo debe redondearse para que se ajuste a su representación finita. Este error de redondeo es un rasgo característico del cálculo de punto flotante. Por lo tanto, al manejar cálculos en números de coma flotante (especialmente si los cálculos se realizan en términos de dinero), debemos ocuparnos de los errores de redondeo en un lenguaje de programación. Veamos un ejemplo:</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/rounding-off-errors-in-java"> <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="/how-restart-google-chrome-windows-os">¿Cómo reiniciar Google Chrome en el sistema operativo Windows?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/what-is-apache">¿Qué es Apache?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/complete-list-ncaa-division-1-colleges-131614">La lista completa de universidades de la División 1 de la NCAA (más recientes)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-use-sql-statements-ms-excel">¿Cómo utilizar declaraciones SQL en MS Excel?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/15-best-call-recording-apps">Las 15 mejores aplicaciones de grabación de llamadas para Android en 2024</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="/java-instanceof">en vez de</a>
</li><li><a href="/add-elements-array-java">java agregar a una matriz</a>
</li><li><a href="/java-try-catch-block">intenta atrapar en java</a>
</li><li><a href="/c-map-find-function">buscar en el mapa c++</a>
</li><li><a href="/return-statement-java">comando de retorno 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 Todos Los Derechos Reservados | <a href="//hr.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>
<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>