A veces necesitamos crear texto y agregar el contorno al texto. Existen principalmente dos métodos para crear un borde para las fuentes que se enumeran a continuación:
- Usando la propiedad de sombra de texto
- Usando la propiedad de trazo de texto
Método 1: Uso de la propiedad de sombra de texto: La propiedad de sombra de texto se usa para agregar borde de fuente o sombra al texto.
Sintaxis:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Valores de propiedad:
- h-shadow: establece una sombra horizontal alrededor de la fuente.
- v-shadow: Establece la sombra vertical alrededor de la fuente.
- blur-radius: Establece el radio de desenfoque alrededor de la fuente.
- color: establece el color alrededor de la fuente.
- ninguno: no establece nada alrededor de la fuente.
- initial: establece el borde de la fuente en su valor predeterminado.
- heredar: hereda los valores de propiedad de sus valores principales.
Valor devuelto: Devuelve un borde/sombra de fuente alrededor del texto.
Ejemplo 1: este ejemplo utiliza la propiedad text-shadow para crear una sombra en el texto.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property
</title>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo utiliza la propiedad text-shadow para crear texto con bordes.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-shadow property
</title>
<!-- Style to use text-shadow property -->
<style>
.GFG {
color: white;
font-size: 50px;
text-shadow: -1px 1px 0 #000,
1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000;
}
</style>
</head>
<body>
<p class="GFG">GeeksforGeeks</p>
</body>
</html>
Producción:
Método 2: Usar la propiedad de trazo de texto: La propiedad de trazo de texto se usa para agregar un 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-.
Ejemplo: este ejemplo utiliza la propiedad text-stroke para crear texto con bordes.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS text-stroke property
</title>
<!-- Style to use text-stroke property -->
<style>
.GFG {
color: white;
font-size: 50px;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
</style>
</head>
<body>
<p class="GFG">GeeksforGeeks</p>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome 4.0
- Internet Explorer 10.0
- Firefox 3.5
- Ópera 9.6
- Safari 4.0
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por riarawal99 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA