Como definir a borda da fonte em CSS
Com CSS, você pode estilizar fontes de várias maneiras. Por exemplo, podemos definir a fronteira para uma fonte para torná -la mais atraente em relação à sua aparência. Uma borda de fonte também é adicionada quando é necessário delinear algum texto. Também permite estilizar o texto e adicionar cor e largura de acordo com suas preferências.
Neste guia, aprenderemos sobre a definição de uma fronteira de fonte no CSS.
Como definir a borda da fonte em CSS?
No CSS, podemos usar as seguintes propriedades para definir a borda da fonte:
- -Propriedade WebKit-Text-Stroke
- Propriedade da sombra de texto
Então vamos começar.
Método 1: Usar-Webkit-Text CSS Propriedade CSS para definir a borda da fonte
A propriedade de retido de texto é especialmente introduzida para definir a fronteira em fontes. No entanto, o Stroke de texto da propriedade não está incluído nos padrões W3C. É por isso que a palavra -chave “-webkit”É adicionado a ele para executar a funcionalidade especificada. O -Webkit-Text-Property trabalha no Safari, Google Chrome e Firefox Browser.
Confira o exemplo a seguir para saber mais sobre como definir a borda da fonte usando a propriedade -webkit-text-stroke.
Exemplo
Aqui está o texto para o qual queremos definir a fronteira:
Dentro do nosso arquivo html, adicionamos um texto como título usando o “ Html Melhor site educacional Para definir a fronteira ao redor da fonte, usaremos o CSS “-WebKit-Text-Stroke“Propriedade com“1px"Fronteira e dê o"vermelho" cor. Também especificaremos a cor do texto como azul, usando o “cor" propriedade: CSS Agora, salvaremos o código e abriremos o arquivo HTML no navegador: Pode-se observar que a borda da fonte foi aplicada com sucesso usando a propriedade -webkit-text-stroke e o texto adicionado parece elegante. Método 2: Use a propriedade de sombra de texto para definir a borda da fonte ““Shadow de texto”Propriedade é um termo auto-explicativo, pois é usado para adicionar sombras em textos. No entanto, pode ser manipulado para definir a borda da fonte com eficiência. Então, vamos aplicar esta propriedade CSS no mesmo texto para definir a borda ao redor. Exemplo Aqui, vamos fazer a sombra vermelha aparecer “1px”De cada lado usando a propriedade de sombra de texto,“-1px 0px 0px“Especificará a sombra do lado esquerdo,“1px 0px 0px”Especificará a sombra do lado direito,“0px -1px 0px”Especificará a sombra do lado superior e“0px 11px 0px”Especificará a sombra do lado inferior: CSS Saída Nós compilamos diferentes abordagens para definir fronteiras de fontes no CSS. Conclusão Para definir a borda da fonte em CSS, o “-WebKit-Text-Stroke”Propriedade e a“Shadow de texto”A propriedade pode ser usada para adicionar a borda da fonte de certas maneiras. O Stroke de texto da propriedade não está incluído nos padrões W3C; No entanto, pode ser utilizado com a palavra -chave -Webkit. Este artigo explicou dois métodos que podem ajudá-lo a definir fronteiras de fontes no CSS. H2
-WebKit-Text-Stroke: 1px vermelho;
cor azul;H2
Shadow de texto:
-1px 0px 0px vermelho,
1px 0px 0px vermelho,
0px -1px 0px vermelho,
0px 1px 0px vermelho; cor: azul;