Usando pseudo elemento (s)
Puede colocar un pseudo elemento de manera que esté detrás del elemento y sea más grande, creando un efecto de borde con su propio fondo, o más pequeño e adentro (pero asegúrese de que el contenido se coloque en la parte superior).
El elemento que necesita varios bordes debe tener su propio borde y posicionamiento relativo.
.borders {
position: relative;
border: 5px solid #f00;
}
El borde secundario se agrega con un pseudo elemento. Se establece con posicionamiento absoluto y se inserta con valores superior / izquierda / inferior / derecha. Esto también tendrá un borde y se mantendrá debajo del contenido (preservando, por ejemplo, la posibilidad de seleccionar el texto y la capacidad de hacer clic en los enlaces) dándole un valor de índice z negativo. Tenga cuidado con el índice Z negativo, si se encuentra dentro de otro elemento con su propio color de fondo, es posible que esto no funcione.
.borders:before {
content: " ";
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #ffea00;
}
Vea el Pen gbgRqZ de Chris Coyier (@chriscoyier) en CodePen.
Puede hacer un tercer borde usando el :after
pseudo clase también. Tenga en cuenta que Firefox 3 (pre 3.6) arruina esto al admitir :after
y :before
, pero no permitiendo que estén absolutamente posicionados (por lo que parece extraño).
Usando esquema
Si bien es un poco más limitado que el borde (rodea todo el elemento, pase lo que pase), el contorno es un borde libre adicional.
.borders {
border: 5px solid blue;
outline: 5px solid red;
}
Usando box-shadow
Puede usar box-shadow para crear un efecto de borde, haciendo que la sombra se desplace y tenga 0 desenfoque. Además, al separar los valores por comas, puede tener tantos “bordes” como desee:
.blur {
box-shadow:
0 0 0 10px hsl(0, 0%, 80%),
0 0 0 15px hsl(0, 0%, 90%);
}
Vea el Pen xbgreX de Chris Coyier (@chriscoyier) en CodePen.
Usando un fondo recortado
Puede hacer que el fondo de un elemento se detenga antes del relleno. De esa manera, el borde normal de un elemento puede verse como un borde doble de alguna manera.
.borders {
border: solid 1px #f06d06;
padding: 5px;
background-clip: content-box; /* support: IE9+ */
background-color: #ccc;
}
En una entrada:
Vea el efecto de doble borde de la pluma en por Chris Coyier (@chriscoyier) en CodePen.