CSS Wewnętrzna granica?

Question

Stworzyłem przycisk po lewej stronie wyłącznie za pomocą CSS. To jest div w div. Jednak trzy przyciski po prawej stronie to background właściwości na tagach img. Zrobiłem to, abym mógł symulować efekt najazdu zgodnie z instrukcjami od here.

Teraz, czy istnieje sposób, aby dodać granicę wewnętrzną, jak w pierwszym przycisku do pozostałych trzech za pomocą CSS?

Fiddle here.

Answer 1

Według box model, wyściółka jest pomiędzy zawartościąi border. Powinieneś być w stanie projektować obrazy jak:

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

Nie należy potrzebują żadnych dodatkowych div s do osiągnięcia tego celu, nawet dla czystej przycisk CSS. Następujący styl jest dla przypadku, gdy obraz jest 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; 
} 

Oto DEMO z podwójnym granicy jak opisano powyżej.

Answer 2

Zastosuj to samo podejście do przycisku - po prostu potraktuj ikony jako obrazy tła do elementu div. Więc trzeba mieć div z jakiegoś wyściółka wewnętrzna div (w przypadku img) z białym obramowaniem, a obraz tła (ikon).

Answer 3

Zakładając, że nie można bezpośrednio modyfikować obrazów ikon, po prostu umieść je w div w taki sam sposób jak "Dodaj do koszyka". Trzeba także użyć albo

background-position: center center; 

aby upewnić się, że ikona pozostaje skupione w mniejszej img i/lub

background-size: 24px 24px; 

skalowanie tła dół trochę tak białe obramowanie robi” t napotkasz symbole.

Answer 4

Nie potrzebujesz dwóch przycisków <divs> i <a>, aby wykonać przycisk. Możesz to zrobić za pomocą pojedynczego <a>. W przypadku obrazów i przycisku można użyć zewnętrznej granicy, aby uzyskać box-shadow. Wyśrodkuj elementy background-images w elementach <img>.

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

wyjściowa:

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;  
}