css agregar sombra de borde

¿Cómo configurar la sombra del borde CSS?

gramática:

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

Valor:

h-shadow: Un valor que debe establecerse, definiendo la posición de la sombra horizontal. Se permiten valores negativos.
v-shadow: Un valor que debe establecerse para definir la posición de la sombra vertical. Se permiten valores negativos.
desenfoque: opcionalmente establezca el valor para definir la distancia de desenfoque.
extensión: un valor de configuración opcional que define el tamaño de la sombra.
color: El valor de una configuración opcional que define el color de la sombra. Si no se establece ningún valor, el valor del color se basa en la visualización del navegador, se recomienda establecerlo.
recuadro: valor de ajuste opcional,

ejemplo

El eje X y el eje Y se establecen en valores positivos (valor positivo eje X derecha eje Y abajo)

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

1: Sombra de texto
1. Atributo: texto-sombra
2. Valor de atributo: hay 4 valores de atributo comúnmente utilizados
: el primer valor de atributo indica la dirección horizontal
, el segundo valor de atributo indica la dirección vertical
, el tercer valor de atributo indica la grado de desenfoque
: el cuarto valor de atributo representa el color

Dos: sombra de caja
1. Atributo: sombra de caja
2. Valor de atributo: hay 4 valores de atributo comunes
: el valor del primer atributo indica la dirección horizontal
- el valor del segundo atributo indica la dirección vertical
- el valor del tercer atributo indica el grado de desenfoque
- El valor del cuarto atributo representa el color
- El valor del quinto atributo representa el recuadro, que estipula que la sombra del cuadro se muestra 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>

El uso de atributos de esquinas redondeadas de borde
1. Atributo: borde-radio (radio)
2. Valor de atributo
- un valor de atributo: establecer el ancho y la altura a la mitad/50%~100% para formar un círculo
- dos valores de atributo: arriba a la izquierda esquina, esquina inferior derecha, esquina superior derecha, esquina inferior izquierda Esquina
: tres valores de atributo: esquina superior izquierda, esquina superior derecha, esquina inferior izquierda, esquina inferior derecha
: cuatro valores de atributo: esquina superior izquierda, esquina superior derecha, esquina inferior derecha, esquina inferior izquierda
- ocho valores de atributo: superior izquierda x superior derecha x inferior derecha x inferior izquierda x/superior izquierda y superior derecha y inferior derecha y inferior izquierda la 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>

Configuración del tamaño del fondo
1. Atributo: tamaño de fondo
2. Valor del atributo:
- El primer tipo: establezca un ancho y una altura fijos de 100px 200px
- El segundo tipo: 100% 100% significa que el porcentaje se completará en relación con el cálculo de el elemento padre Parent box
- El tercer tipo: 100% automático
- El cuarto tipo: cobertura de cobertura (no deformará la imagen pero se recortará cuando la imagen la exceda)
- El quinto tipo: contenga cobertura (indica que lado toca el nivel principal contiene El cuadro dejará de cambiar, no se deformará ni se recortará)

<!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 agregar sombra de borde

Supongo que te gusta