css adicionar sombra de borda

Como definir a sombra da borda do CSS?

gramática:

<style>
box-shadow: h-shadow v-shadow blur spread color inset;
</style>

Valor:

h-shadow: Um valor que deve ser definido, definindo a posição da sombra horizontal. Valores negativos são permitidos.
v-shadow: Um valor que deve ser definido para definir a posição da sombra vertical. Valores negativos são permitidos.
desfoque: Opcionalmente, defina o valor para definir a distância do desfoque.
spread: Um valor de configuração opcional que define o tamanho da sombra.
color : O valor de uma configuração opcional que define a cor da sombra. Se nenhum valor for definido, o valor da cor é baseado na exibição do navegador, é recomendável defini-lo.
inserir: valor definido opcional,

exemplo

Os eixos X e Y são definidos para valores positivos (valor positivo eixo X à direita eixo Y para baixo)

<style>
box-shadow:4px 4px 15px #f00;
</style>

1: Text shadow
1. Atributo: text-shadow
2. Valor do atributo: Existem 4 valores de atributo comumente usados
- o primeiro valor de atributo indica a direção horizontal
- o segundo valor de atributo indica a direção vertical
- o terceiro valor de atributo indica a grau de desfoque
- O quarto valor de atributo representa a cor

Dois: box shadow
1. Atributo: box-shadow
2. Valor do atributo: Existem 4 valores de atributos comuns
- o primeiro valor de atributo indica a direção horizontal
- o segundo valor de atributo indica a direção vertical
- o terceiro valor de atributo indica o grau de desfoque
- O quarto valor do atributo representa a cor
- O quinto valor do atributo representa a inserção, que estipula que a sombra da caixa é exibida dentro

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            text-shadow: 0 0 1px red;
        }
        p{
            width: 100px;
            height: 100px;
            background: skyblue;
        }
        p{
            box-shadow:0 0 2px #000;
        }
    </style>
</head>
<body>
    <div>
        文本内容
    </div>
    <p></p>
</body>
</html>

O uso de atributos de borda arredondada
1. Atributo: raio da borda (raio)
2. Valor do atributo
- um valor de atributo: defina a largura e a altura para metade/50%~100% para formar um círculo
- dois valores de atributo: superior esquerdo canto, canto inferior direito, canto superior direito, canto inferior esquerdo Canto
- três valores de atributo: canto superior esquerdo, canto superior direito, canto inferior esquerdo, canto inferior direito
- quatro valores de atributo: superior esquerdo, superior direito, inferior direito, inferior esquerdo
- oito valores de atributo: superior esquerdo x superior direito x inferior direito x inferior esquerdo x/superior esquerdo y superior direito y inferior direito y inferior esquerdo o y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background: pink;
            margin: 200px auto;
            border-radius: 10px 10px 10px 10px/10px 10px 10px 10px
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Configuração do tamanho do plano de fundo
1. Atributo: background-size
2. Valor do atributo:
- O primeiro tipo: define uma largura e altura fixas de 100px 200px
- O segundo tipo: 100% 100% significa que a porcentagem será preenchida em relação ao cálculo de o elemento pai Caixa pai
- O terceiro tipo: 100% automático
- O quarto tipo: cobertura de cobertura (não deformará a imagem, mas será cortada quando a imagem a exceder)
- O quinto tipo: conter cobertura (indica que um determinado lado toca o nível pai contém A caixa parará de mudar, não será deformada ou cortada)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 100px auto;
            background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.7oOC6JBP9YBcN48LmPd1tQAAAA?pid=ImgDet&rs=1);
            background-repeat: no-repeat;
            background-size:contain
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

css adicionar sombra de borda

Acho que você gosta