disign.it | CSS: bordo trasparente interno | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 5.437 visualizzazioni

CSS: bordo trasparente interno

03/01/2012

Senza dover annidare due box uno dentro l'altro, esiste una tecnica CSS che permette di creare un div con doppio bordo, nel codice di esempio una patriottica combinazione, bordo esterno verde, bordo interno bianco, sfondo rosso!

Ecco il codice (sostituire le parentesi quadre con le parentesi graffe) della classe da applicare al nostro div:

.bordo_interno [
    background: #f00;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
]

.bordo_interno:before [
    border: 5px solid #0f0;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
]

← CSS: formattare i blockquote Javascript: intercettare il blocco maiuscolo attivato →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.