Sí, lo sabemos: podemos establecer el ancho del borde. El ancho del borde puede ser 5px, 10px, 20px o cualquier valor.
Sin embargo, ¿alguna vez has imaginado que puedes establecer un color independiente para cada borde de 1 px? ¿Cuál es este concepto? Es decir, si establece un borde de 10 píxeles para un elemento, puede establecer 10 colores para esta área de borde de 10 píxeles. Cada 1px es una capa (grupo). DEMOSTRACIÓN: Explicación detallada de múltiples conjuntos de colores de borde en css3 border-colors
Bueno, revisemos cómo configurar el tamaño del borde para los elementos (bloque de código 1):
El código anterior indica que hemos definido un borde de 6 píxeles para un elemento div con la prueba className. Por supuesto, este es un rectángulo con 4 lados.
Por lo tanto, este código CSS se puede refinar en (bloque de código 2):
A través del código refinado, descubrimos que en realidad podemos establecer colores para los cuatro lados del rectángulo. En cuanto a si los colores deben ser iguales o diferentes, depende de sus propias necesidades.
Cuando ejecutas el código refinado (por supuesto, puedes cambiar el color de cada lado), ves un rectángulo con un borde negro de 6px. Bueno, esto es lo que esperamos.
Sin embargo, ahora podemos dividir el borde de 6px en 6 grupos, cada 1px es un grupo, por lo que cada borde se puede configurar en hasta 6 colores diferentes.
¿Cómo hacerlo? Eche un vistazo (bloque de código tres):
.prueba{
ancho de borde: 6px;
estilo de borde: sólido;
colores-borde-superior:#000 #fff #999 #aaa #ccc #eee;
colores del borde derecho:#000 #fff #999 #aaa #ccc #eee;
colores-borde-inferior:#000 #fff #999 #aaa #ccc #eee;
colores-borde-izquierdo:#000 #fff #999 #aaa #ccc #eee;
}
.prueba{
ancho de borde: 6px;
estilo de borde: sólido;
color-borde-superior:#000;
color-borde-derecho:#000;
color-inferior-borde:#000;
color-borde-izquierdo:#000;
}
.prueba{
borde:6px sólido #000;
}
<div class="test">Pruebe la configuración del color del borde</div>