sombra de texto css3 (sombra de texto) e sombra de caixa (sombra de caixa)

Os efeitos realmente bonitos são todos ajustados lentamente sob seu próprio controle.A seguir, apresentamos o conteúdo e métodos de uso específicos:

Propriedades CSS3

Propriedades de sombra do texto

  • text-shadow: cor da distância da sombra xy

  • Nota: As posições de sombra horizontal e vertical permitem valores negativos, podendo ser feitas várias configurações de sombra (modo separado por vírgula)

Sombra de caixa

  caixa-sombra caixa-sombra

  sombra h necessária. A localização da sombra horizontal. Permitir valores negativos para
  a sombra em V necessária. A localização da sombra vertical. Permita que valores negativos
  sejam opcionais. A
  propagação da distância do borrão é opcional. O tamanho da sombra é
  opcional. A cor da sombra.
  A inserção é opcional. Altere a sombra interna da sombra da sombra externa (no início)
  box-shadow: 10px 10px 5px 10px # 888888 inserção;

Forma abreviada:

  caixa-sombra: 10 px 10 px 5 px 10 px # 888888 inserida;

O diagrama de caso é o seguinte:

 

O código de implementação específico é o seguinte:

<! DOCTYPE html>
<html lang = "pt">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1.0">
    <style>
        * {
            margem: 0;
            estofamento: 0;
        }
        .caixa{
            largura: 500 px;
            margem: 40px automático;
            alinhamento de texto: centro;
        }
        .box p {
            tamanho da fonte: 40 px;
            cor: # e6c9c9;
            sombra de texto: -4px 0px 1px # 000;
        }
        .sombra{
            cor de fundo: #eee;
            largura: 200 px;
            altura: 200 px;
            margem: 20 px automático;
            sombra da caixa: 0px 0px 10px # bd9c9c;
        }
    </style>
</head>
<body>
    <div class = "box">
        <p> Propriedades da sombra do texto </ p>
        <div class = "shadow">

        </div>
    </div>
</body>
</html>
 
Se você se sentir útil, preste atenção e sempre compartilhará seu conhecimento. ! !

Acho que você gosta

Origin www.cnblogs.com/piaoyi1997/p/12742168.html
Recomendado
Clasificación