Usar pseudo elemento (s)
Puede colocar un pseudoelemento de modo 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 y 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 posibilidad 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.
También puede hacer un tercer borde utilizando la :afterpseudoclase. Tenga en cuenta que Firefox 3 (anterior a 3.6) arruina esto al admitir :aftery :before, pero no permitir 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.
Usar 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 de Chris Coyier (@chriscoyier) en CodePen.
