Saltar al contenido

¿CSS doble borde (2 colores) sin usar contorno?

Solución:

Puede agregar varios bordes utilizando pseudo elementos y luego colocarlos alrededor de su borde original. Sin marcado adicional. Compatible con varios navegadores, esto ha existido desde CSS 2.1. Lancé una demostración en jsfiddle para ti … nota, el espacio entre los colores del borde está ahí para el ejemplo. Puede cerrarlo modificando el número de píxeles en el posicionamiento absoluto.

.border
{
    border:2px solid #36F; 
    position:relative;
    z-index:10
}

.border:before 
{
    content:"";
    display:block;
    position:absolute;
    z-index:-1;
    top:2px;
    left:2px;
    right:2px;
    bottom:2px;
    border:2px solid #36F
}

http://jsfiddle.net/fvHJq/1/

Utilice la sombra del cuadro para el segundo borde.

div.double-border {
    border: 1px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 1px #000;
    -moz-box-shadow: 0px 0px 0px 1px #000;
    box-shadow: 0px 0px 0px 1px #000;
}

En este caso, box-shadow no ignora la propiedad border-radius como lo hace el esquema

Una solución muy simple que podría usar como alternativa si nada más fuera usar dos divs. Su div principal, y luego uno vacío simplemente envolviéndolo que podría usar para establecer el segundo borde.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *