Come impostare il bordo del carattere in CSS
Con CSS, puoi modellare i caratteri in diversi modi. Ad esempio, possiamo impostare il bordo per un carattere per renderlo più attraente rispetto al suo aspetto. Viene inoltre aggiunto un bordo del carattere quando è necessario delineare un po 'di testo. Ti consente anche di modellare il testo e aggiungere colore e larghezza in base alle tue preferenze.
In questa guida, impareremo a impostare un bordo del carattere in CSS.
Come impostare il bordo del carattere in CSS?
In CSS, possiamo usare le seguenti proprietà per impostare il bordo del carattere:
- -Proprietà WebKit-text-stroke
- Proprietà del testo-shadow
Quindi iniziamo.
Metodo 1: Utilizzare -webkit-text-troke CSS Proprietà per impostare il bordo del carattere
La proprietà di text-stroke è appositamente introdotta per impostare il bordo ai caratteri. Tuttavia, lo stroke di testo della proprietà non è incluso negli standard W3C. Ecco perché la parola chiave "-webkit"Viene aggiunto ad esso per eseguire la funzionalità specificata. -Webkit-text-property funziona su Safari, Google Chrome e Firefox Browser.
Dai un'occhiata al seguente esempio per saperne di più sull'impostazione del bordo del carattere utilizzando la proprietà -webkit-text-stroke.
Esempio
Ecco il testo per il quale vogliamo impostare il bordo:
All'interno del nostro file HTML, abbiamo aggiunto un testo come intestazione usando " Html Miglior sito web educativo Per impostare il bordo attorno al carattere, useremo il CSS "-WebKit-text-Stroke"Proprietà con"1px"Confine e dargli il"rosso" colore. Specificheremo anche il colore del testo come blu, usando il “colore" proprietà: CSS Ora salveremo il codice e apriremo il file HTML nel browser: Si può vedere che il bordo del carattere è stato applicato correttamente utilizzando la proprietà -webkit-text-stroke e il testo aggiunto sembra elegante. Metodo 2: utilizzare la proprietà text-shadow per impostare il bordo del carattere "text-shadow"La proprietà è essa stessa un termine autoesplicativo in quanto viene utilizzata per aggiungere ombre nei testi. Tuttavia, può essere manipolato per impostare il bordo del carattere in modo efficiente. Quindi, applichiamo questa proprietà CSS sullo stesso testo per impostare il bordo attorno ad esso. Esempio Qui, faremo scoppiare l'ombra rossa "1px"Da ciascun lato usando la proprietà del testo-shadow,"-1px 0px 0px"Specificherà l'ombra del lato sinistro,"1px 0px 0px"Specificherà l'ombra sul lato destro,"0px -1px 0px"Specificherà l'ombra del lato superiore e"0px 11px 0px"Specificherà l'ombra del lato inferiore: CSS Produzione Abbiamo compilato approcci diversi per impostare i bordi del carattere in CSS. Conclusione Per impostare il bordo del carattere in CSS, il “-WebKit-text-Stroke"Proprietà e"text-shadow"La proprietà può essere utilizzata per aggiungere il bordo del carattere in certi modi. Il raggruppamento della proprietà non è incluso negli standard W3C; Tuttavia, può essere utilizzato con la parola chiave -webkit. Questo articolo ha spiegato due metodi che possono aiutarti a impostare i bordi del carattere in CSS. H2
-WebKit-text-Stroke: 1px rosso;
colore blu;H2
text-shadow:
-1px 0px 0px rosso,
1px 0px 0px rosso,
0px -1px 0px rosso,
0px 1px 0px rosso; colore: blu;