A volte abbiamo bisogno di creare del testo e aggiungere il contorno al testo. Ci sono principalmente due metodi per creare un bordo ai font che sono elencati di seguito:
- Utilizzando la proprietà text-shadow
- Utilizzando la proprietà text-stroke
Metodo 1: utilizzando la proprietà text-shadow: La proprietà text-shadow è usata per aggiungere un bordo o un’ombra al testo.
Sintassi:
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
Valori della proprietà:
- h-shadow: Imposta l’ombra orizzontale intorno al font.
- v-shadow: Imposta l’ombra verticale intorno al font.
- blur-radius: Imposta il raggio di sfocatura intorno al font.
- colore: Imposta il colore intorno al font.
- nessuno: Non imposta nulla intorno al font.
- iniziale: Imposta il bordo del font al suo valore predefinito.
- eredita: Eredita i valori delle proprietà dai suoi genitori.
Return Value: Restituisce un bordo/ombra del font intorno al testo.
Esempio 1: Questo esempio usa la proprietà text-shadow per creare ombra al testo.
<!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> Output:
Esempio 2: Questo esempio usa la proprietà text-shadow per creare testo bordato.
<!DOCTYPE html><html> <head> <title> CSS text-shadow property </title> <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> <pclass="GFG">GeeksforGeeks</p> </body> </html> Output:
Metodo 2: Utilizzo della proprietà text-stroke: La proprietà text-stroke è usata per aggiungere il tratto al testo. Questa proprietà può essere usata per cambiare la larghezza e il colore del testo. Questa proprietà è supportata dall’uso del prefisso -webkit-.
Esempio: Questo esempio usa la proprietà text-stroke per creare un testo bordato.
<!DOCTYPE html><html>
<head>
<title>
CSS text-stroke property </title>
<style> .GFG { color: white; font-size: 50px; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; } </style> </head> <body> <pclass="GFG">GeeksforGeeks</p> </body> </html> Output:
