Cómo establecer el borde de la fuente en CSS
Con CSS, puedes diseñar fuentes de varias maneras. Por ejemplo, podemos establecer el borde para una fuente para que sea más atractiva con respecto a su apariencia. También se agrega un borde de fuentes cuando se requiere para delinear algún texto. También le permite diseñar el texto y agregar color y ancho de acuerdo con sus preferencias.
En esta guía, aprenderemos sobre establecer un borde de fuente en CSS.
Cómo establecer el borde de la fuente en CSS?
En CSS, podemos usar las siguientes propiedades para establecer el borde de la fuente:
- -Propiedad WebKit-Text-Stroke
- Propiedad de Shadow de texto
Entonces empecemos.
Método 1: Usar la propiedad CSS -Webkit-Text-Stroke-Stroke para establecer el borde de la fuente
La propiedad de extracción de texto se introduce especialmente para establecer el borde en las fuentes. Sin embargo, la cuenta de texto de propiedad no está incluida en los estándares W3C. Es por eso que la palabra clave "-webkit"Se agrega a él para realizar la funcionalidad especificada. El -webkit-text-property funciona en Safari, Google Chrome y Firefox Browser.
Consulte el siguiente ejemplo para saber más sobre cómo establecer el borde de la fuente utilizando la propiedad -webkit-text-stroke.
Ejemplo
Aquí está el texto para el que queremos establecer el borde:
Dentro de nuestro archivo HTML, hemos agregado un texto como encabezado usando el " Html Mejor sitio web educativo Para colocar el borde alrededor de la fuente, usaremos el CSS "-WebKit-Text-Stroke"Propiedad con"1px"Border y dale el"rojo" color. También especificaremos el color del texto como azul, usando el "color" propiedad: CSS Ahora, guardaremos el código y abriremos el archivo HTML en el navegador: Se puede ver que el borde de la fuente se ha aplicado con éxito utilizando la propiedad -webkit-text-screks y el texto agregado se ve elegante. Método 2: Use la propiedad de Shadow de texto para establecer el borde de la fuente "sombra de texto"La propiedad es en sí misma un término autoexplicativo, ya que se usa para agregar sombras en textos. Sin embargo, se puede manipular establecer el borde de la fuente de manera eficiente. Entonces, apliquemos esta propiedad CSS en el mismo texto para establecer el borde a su alrededor. Ejemplo Aquí, haremos que la sombra roja salga "1px"Desde cada lado utilizando la propiedad de Shadow de texto", "-1px 0px 0px"Especificará la sombra del lado izquierdo", "1px 0px 0px"Especificará la sombra del lado derecho", "0px -1px 0px"Especificará la sombra de la parte superior y"0px 11px 0px"Especificará la sombra del lado inferior: CSS Producción Hemos compilado diferentes enfoques para establecer bordes de fuentes en CSS. Conclusión Para establecer el borde de la fuente en CSS, el "-WebKit-Text-Stroke"Propiedad y la"sombra de textoLa propiedad se puede usar para agregar el borde de la fuente de ciertas maneras. La propiedad de texto de propiedad no está incluida en los estándares W3C; Sin embargo, se puede utilizar con la palabra clave -webkit. Este artículo ha explicado dos métodos que pueden ayudarlo a establecer bordes de fuentes en CSS. H2
-WebKit-Text-Stroke: 1px rojo;
color azul;H2
sombra de texto:
-1px 0px 0px rojo,
1px 0px 0px rojo,
0px -1px 0px rojo,
0px 1px 0px rojo; color: azul;