CSS: ottenere un doppio bordo sulle immagini.

Loading

Ottenere un doppio sfondo su un’immagine è molto semplice, basta sfruttare contemporaneamente bordo, background e padding.

Assengando colore, dimensione e tipo al bordo dell’immagine (o di qualsiasi altro elemento) otteniamo il bordo vero e proprio:

 border:#9C6 8px solid; 

E quindi un bordo l’abbiamo realizzato, per realizzare il secondo (il più interno) dobbiamo contemporaneamente assegnare un padding e uno sfondo:

background:#960; 
padding:15px; 


Ovviamente questa tecnica funziona con le immagini in quanto “coprono” lo sfondo, se le applicassimo ad un testo vedremmo lo sfondo, e per ottenere un doppio bordo dovremmo mettere dentro un altro box.
Invece di utilizzare un colore per lo sfondo potremmo utilizzare un’altra immagine, ottenendo un effetto ancora diverso.

Per il codice completo e un esempio del risultato ottenuto: http://demo.studio-88.it/imgBackgruond/