¿Cómo agregar un borde doble con diferentes colores?
Para agregar un borde doble en cualquier forma usando CSS, el ' :antes El seleccionador es famoso. Cambia los colores de ambos bordes para hacerlos únicos. El procedimiento paso a paso proporcionado a continuación para agregar un borde doble con diferentes colores:
Paso 1: agregue el elemento Div y asigne clases
En el archivo HTML, agregue el elemento div dentro de la etiqueta
y asigne un ' clase ” con el nombre de “ borde doble ”. Los usuarios también pueden crear su propio nombre de clase:< división clase = 'doble borde' >
< / división >
Paso 2: Crear etiqueta de estilo
En este paso, cree una porción para la clase ' borde doble ” y hazlo una copia con el “ :antes seleccionador. De esta forma, las propiedades CSS se aplicarán a nuestras clases:
< estilo >
.doble- borde {
}
.doble- borde :antes {
}
< / estilo >
Paso 3: agregar estilos a la clase
Las propiedades CSS se aplican al elemento div que tiene una clase de ' borde doble ”. Los siguientes estilos se mencionan a continuación:
.doble- borde {
fondo- color : #ccc;
borde : 4px verde sólido;
relleno: 50px;
ancho : 16 píxeles;
altura : 16 píxeles;
posición: relativa;
margen: 0 auto;
}
La descripción de las propiedades CSS se da a continuación:
- Primero, agregue “ color de fondo ” que es gris y el “ borde ” de 4px de peso y color verde.
- El ' relleno ” de 50px para crear el espacio interior de 50px desde todos los lados.
- Al final, el “ ancho ' y ' altura' de 16px. También el ' margen ” es 0 automático, lo que significa que los márgenes superior e inferior serán cero e izquierdos.
La página web se ve así:
El resultado muestra que el borde se aplica a 'div'.
Paso 4: Adición del Selector de CSS
Ahora, muévase hacia el segundo cuadro en la etiqueta de estilo que tiene el ' :antes ” selector adjunto, y escriba el siguiente código:
.doble- borde :antes {fondo : ninguno;
borde : 4px azul sólido;
contenido : '' ;
posición: absoluta;
arriba: 4px;
izquierda: 4px;
derecha: 4px;
abajo: 4px;
}
Las propiedades se explican a continuación:
- Utilizar el ' posición ” propiedad para fijar la posición de un elemento.
- Después de eso, el “ superior, izquierda, derecha e inferior ” define el margen del elemento recién creado con respecto al original.
- Un selector de CSS llamado “: antes ” añade contenido delante de un elemento elegido.
La salida se ve como:
Así es como se puede agregar un borde doble usando diferentes colores.
Conclusión
Para agregar un borde doble, primero cree un elemento div y asígnelo a una clase. Luego, agrega el CSS “ posición ” propiedad que debe establecerse en relativa. Después de eso, agregue el Selector de CSS ':before' para que los usuarios puedan agregar contenido antes de un elemento elegido. Esta guía ha demostrado el uso de bordes dobles con varios colores.