CSS Inner Border?

Question

Ho creato il pulsante a sinistra puramente con CSS. È un div all'interno di un div. Tuttavia, i tre pulsanti sulla destra sono proprietà background sui tag img. L'ho fatto in modo da poter simulare un effetto rollover seguendo le istruzioni da here.

Ora, c'è un modo per aggiungere il bordo interno, come nel primo tasto, per gli altri tre con i CSS?

Fiddle here.

Answer 1

Secondo il box model, imbottitura è tra il contenuti e confine. Si dovrebbe essere in grado di stile le immagini come:

.img-btn { 
    background: #FFF; // inner border color 
    padding: 2px; // inner border width 
    border: 2px solid #[yourgreen]; // outer border 
} 

Non dovrebbe essere necessario alcun aggiuntivi div s per raggiungere questo obiettivo, anche per il pulsante CSS puro. Seguendo lo stile è il caso in cui l'immagine è un background-image:

.img-btn { 
    background: #FFF url('your.img') no-repeat; 
    padding: 2px; 
    border: 2px solid #[yourgreen]; 
    width: [image width]; 
    height: [image height]; 
    background-position: center center; 
} 

Ecco un DEMO di doppio confine, come descritto in precedenza.

Answer 2

Utilizza lo stesso approccio del pulsante: considera le icone come immagini di sfondo sul div interno. Così si dovrebbe avere un div con un po 'imbottitura, un div interno (nel tuo caso img) con un bordo bianco, e un'immagine di sfondo (le icone.)

Answer 3

Supponendo che non sia possibile modificare direttamente le immagini dell'icona, basta avvolgerle in un div allo stesso modo di "Aggiungi al carrello". Avrete anche bisogno di utilizzare

background-position: center center; 

per garantire che l'icona rimane centrato all'interno della IMG più piccolo, e/o

background-size: 24px 24px; 

in scala lo sfondo giù un po 'in modo che il bordo bianco doesn' t correre nei simboli.

Answer 4

Non sono necessari due <divs> e un <a> per eseguire il pulsante. Puoi farlo con un singolo <a>. Per entrambe le immagini e il pulsante è possibile utilizzare box-shadow per eseguire il bordo esterno. Centra lo background-images negli elementi <img>.

Demo: http://jsfiddle.net/ThinkingStiff/bNmzB/

uscita:

HTML:

<a id="add" href="#">Add To Cart</a> 
<img id="facebook" class="icon" /> 
<img id="twitter" class="icon" /> 
<img id="email" class="icon" /> 

CSS:

#add { 
    background-color: #9bc9c7; 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px #9bc9c7; 
    color: white; 
    display: inline-block; 
    font: normal 13px/25px Helvetica, Arial, Sans Serif; 
    height: 25px; 
    margin-right: 6px; 
    text-align: center; 
    text-decoration: none; 
    text-transform: uppercase; 
    width: 120px; 
    vertical-align: top; 
} 

#add:hover { 
    background-color: #eabeb2; 
    box-shadow: 0 0 0 2px #eabeb2; 
} 

.icon { 
    background-color: rgb(155, 201, 199); 
    border: 1px solid white; 
    box-shadow: 0 0 0 2px rgb(155, 201, 199); 
    height: 25px; 
    margin-right: 3px; 
    width: 25px;  
}