Come ottenere un contorno bianco intorno a un’immagine in CSS

Sto cercando di stile di un immagine con un bordo bianco intorno ad esso, come nell’esempio seguente:

Come ottenere un contorno bianco intorno a un'immagine in CSS

Se ho fatto:

 <ul class="learn">
    <li class="thumbnaile" > <img id="portrait" src="/assets/allyson.jpg" class="stretch" />
    </li>
 </ul>

…quindi aggiungere imbottitura .thumbnaile…

C’è di meglio/più efficiente modo di fare di questo?

OriginaleL’autore Elias7 | 2012-06-11

2 Replies
  1. 6

    Si potrebbe utilizzare border (che non è certo la scelta più ovvia), ma c’è anche padding e box-shadow:

    img {
        background-color: #fff;
        padding: 4px;
    }

    JS Violino demo.

    In questo esempio il img elemento è imbottito 4px, che permette la background-color per estendere fuori da ‘dietro’ l’immagine.

    img {
        margin: 4px 0 0 4px;
        box-shadow: 0 0 0 4px #fff;
    }

    JS Violino demo.

    Perché box-shadow non spostare l’elemento del margin è necessario per permettere il box-shadow per mostrare su tutti i lati.

    La ringrazio molto Davide. Molto apprezzato 🙂
    Sei molto, molto gradito! =)

    OriginaleL’autore David Thomas

  2. 4

    Usando solo il confine proprietà dovrebbe fare quello che vuoi:

    border: solid white 4px;

    Così a lungo come l’unica parte che necessitano di confine è il bordo esterno (dell’immagine rettangolare), che la circondano su come mostrato in figura. Se si desidera modificare il box-sizing, se il bordo di taglio nell’immagine; ma per imbottitura, le impostazioni predefinite di lavoro.

    Il confine lavoro di <li> o <img> tag, a seconda di come si desidera porre l’immagine(s) (<li> permette a più immagini senza bordo tra di loro).

    Aggiunta di padding per la classe avrà un effetto simile, ma si comportano in modo diverso per quanto riguarda il box utilizzato per il dimensionamento ed il posizionamento dell’elemento. Imbottitura sul <li> avranno un effetto vicina ad una corretta confine sul <img>, ma mettendo il confine sul <img> stesso può semplificare il vostro CSS.

    Grazie peachykeen!

    OriginaleL’autore ssube

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *