GeeksforGeeks

Por vezes precisamos de criar texto e adicionar o esboço ao texto. Existem principalmente dois métodos para criar uma margem para as fontes que se encontram listadas abaixo:

  • Utilizar propriedade de sombras de texto
  • Utilizar propriedade de sombras de texto

Método 1: Utilizar propriedade de sombras de texto: A propriedade sombra do texto é utilizada para adicionar borda da fonte ou sombra ao texto.
Syntax:

text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;

Valores de propriedade:

  • h-shadow: Define a sombra horizontal em torno da fonte.
  • v-shadow: Define a sombra vertical em torno da fonte.
  • blur-radius: Define o raio de borrão em torno da fonte.
  • cor: Define a cor em torno da fonte.
  • nenhum: Não define nada em torno da fonte.
  • inicial: Define a margem da fonte para o seu valor por defeito.
  • herda: Herda os valores da propriedade dos seus valores parentais.

Valor de Retorno: Retorna uma borda da fonte/sombra em torno do texto.
Exemplo 1: Este exemplo utiliza a propriedade text-shadow para criar sombra ao texto.

html

>/p>

>/p>

<!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>



div id=”d4ecfd5f”>

Exemplo 2: Este exemplo utiliza a propriedade de sombras de texto para criar texto bordado.

html
div>

>/p>

>/p>

>br>

<!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>



Eliminar:

Método 2: Usando a propriedade text-stroke: A propriedade text-stroke é utilizada para adicionar um traço ao texto. Esta propriedade pode ser usada para alterar a largura e a cor do texto. Esta propriedade é suportada pela utilização do prefixo -webkit-.
Exemplo: Este exemplo utiliza a propriedade text-stroke para criar texto bordado.

html
div>

>/p>

>/p>

>br>

<!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>

br>



Eliminar:

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *