Il modo più efficace per creare ombre box con CSS

Question

Sono interessato a scoprire quale modo di creare ombre box con CSS è più efficace. Ma questo voglio dire: facilità di implementazione, flessibilità e compatibilità tra browser.

Answer 1

La scuoiatura di cipolle è la mia preferita personale.

Un esempio può essere trovato in questo alistapart articolo .

Answer 2

Ora questo è molto semplice da raggiungere:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

Il primo valore è l'offset orizzontale. Il secondo valore è l'offset verticale. Il terzo valore è la diffusione dell'effetto sfocatura. Il quarto valore è il colore.

Inoltre, puoi aggiungere un altro valore di inset , che farà apparire l'ombra all'interno del tuo elemento di blocco:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

Questo è ora molto ben supportato: https://caniuse.com/#feat=css- boxshadow

Answer 3

Il modo in cui trovo più efficace attualmente è questo:

Le regole CSS necessarie:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

Codice HTML su cui viene applicato il CSS:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div>

L'ho trovato molto semplice da implementare, flessibile e funziona allo stesso modo su FF 3, IE 6 & amp; 7.