Aprendizaje básico de CSS--25 borde (borde) avanzado

1. Atributos comunes de las fronteras

borde-radio
sombra de la caja
imagen de borde

Atributos	ilustrar	CSS
imagen de borde	Establece la propiedad abreviada para todas las imágenes de borde.	3
borde-radio	Una propiedad abreviada para configurar las cuatro propiedades border-*-radius	3
sombra de la caja	Agregar una o más sombras desplegables	3

Dos esquinas redondeadas con radio de borde

Agregar esquinas redondeadas en CSS2 es complicado. Tuvimos que usar una imagen diferente para cada esquina.

En CSS3 es fácil crear esquinas redondeadas.

En CSS3, la propiedad border-radius se usa para crear esquinas redondeadas:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-边框圆角</title> 
<style> 
#example1
{
	border:2px solid #a1a1a1;
	padding:10px 40px; 
	background:#dddddd;
	width:300px;
	border-radius:25px;
}
#example2 {
  border: 2px solid red;
  padding: 10px;
  border-radius: 50px 20px;
}
</style>
</head>
<body>
<div id="example1">
  <p>border-radius 属性允许您为元素添加圆角边框！</p>
</div>
<br><br>
<div id="example2">
  <p>如果设置了两个值，第一个用于左上角和右下角，第二个用于右上角和左下角。</p>
</div>
</body>
</html>

Propiedades de filete:

Atributos	describir
borde-radio	Abreviatura de las cuatro propiedades de borde de esquina---radio
borde-superior-izquierda-radio	define el arco de la esquina superior izquierda
borde-arriba-derecha-radio	define el arco de la esquina superior derecha
borde-inferior-derecho-radio	define el arco de la esquina inferior derecha
borde-inferior-izquierda-radio	define el arco de la esquina inferior izquierda

border-radius - Especifica cada esquina redondeada

Si especifica solo un valor en la propiedad border-radius, se generarán 4 esquinas redondeadas.

Sin embargo, si desea especificar uno por uno en las cuatro esquinas, puede usar las siguientes reglas:

Cuatro valores: el primer valor es la esquina superior izquierda, el segundo valor es la esquina superior derecha, el tercer valor es la esquina inferior derecha y el cuarto valor es la esquina inferior izquierda. (borde-radio: 15px 50px 30px 5px:)
Tres valores: el primer valor es la esquina superior izquierda, el segundo valor es la esquina superior derecha y la esquina inferior izquierda, y el tercer valor es la esquina inferior derecha ( border-radius: 15px 50px 30px: )
Dos valores: el primer valor es la esquina superior izquierda y la esquina inferior derecha, el segundo valor es la esquina superior derecha y la esquina inferior izquierda ( border-radius: 15px 50px: )
Un valor: las cuatro esquinas redondeadas tienen el mismo valor ( border-radius: 50px: )

Tres, caja de sombra caja de sombra

La propiedad box-shadow en CSS3 se usa para agregar sombras

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS基础学习-边框阴影</title> 
<style> 
div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<div></div>

</body>
</html>

gramática:

box-shadow: h-shadow v-shadow desenfoque recuadro de color extendido;

Nota: La propiedad boxShadow agrega una o más sombras al cuadro. Esta propiedad es una lista de sombras separadas por comas, cada sombra especificada por 2 a 4 valores de longitud, un valor de color opcional y una palabra clave insertada opcional. El valor de la longitud omitida es 0.

valor	ilustrar
h-sombra	requerido. La posición de la sombra horizontal. Valores negativos permitidos
v-sombra	requerido. La posición de la sombra vertical. Valores negativos permitidos
difuminar	opcional. distancia de desenfoque
desparramar	opcional. el tamaño de la sombra
color	opcional. El color de la sombra. Encuentre la lista completa de valores de color en CSS Color Values
recuadro	opcional. Cambia la sombra de la sombra exterior (al inicio) a la sombra interior

Por ejemplo, ¿qué pasa si modificas los dos primeros dígitos?

Cuatro, imagen de borde de imagen de borde

Con la propiedad border-image de CSS3, puede crear un borde usando una imagen: ¡la propiedad border-image le permite especificar una imagen como borde! Imagen original utilizada para crear el borde de arriba:

gramática:

border-image: anchura de corte fuente inicio repetir|inicial|heredar;

Atributos:

valor	describir
borde-imagen-fuente	Se utiliza para especificar la ubicación de la imagen que se utilizará para dibujar el borde.
rebanada-de-imagen-del-borde	Los bordes de la imagen están desplazados hacia adentro
borde-imagen-ancho	El ancho del borde de la imagen.
Borde-imagen-outset	Se usa para especificar la cantidad para dibujar el área de la imagen del borde fuera del borde
borde-imagen-repetir	Se utiliza para establecer si el borde de la imagen debe repetirse, estirarse o redondearse.