CSS內部邊框？

Question

我純粹用CSS創建了左邊的按鈕。它是一個div內的div。但是，右邊的三個按鈕是background屬性上的img標籤。我這樣做是爲了能夠根據here的說明模擬翻轉效果。

現在，有沒有辦法使用CSS添加的內部邊界，如在第一個按鈕，其他三個？

小提琴here。

Answer 1

按照box model，填充是內容之間邊界。您應該能夠樣式化相似圖片：

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

你不應該需要任何額外的div s到做到這一點，即使是你的純CSS按鈕。下面的樣式是針對情況下，當圖像是一個背景圖像：

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

這裏的雙邊框的DEMO如上所述。

Answer 2

使用與按鈕相同的方法 - 將圖標作爲背景圖像處理爲內部div。所以，你應該有一些填充，內格（在你的情況IMG）一個div白色邊框和背景圖像（圖標）。

Answer 3

假設您不能直接修改圖標圖像，只需用「添加到購物車」的方式將它們包裝在一個div中。您還需要爲使​​用

background-position: center center; 

，以確保圖標停留在較小的範圍內IMG居中，和/或

background-size: 24px 24px; 

規模的背景下來了一點，所以白邊沒有按」 t碰到符號。

Answer 4

你不需要兩個<divs>和一個<a>做按鈕。你可以用一個<a>來做到這一點。對於圖像和按鈕，您可以使用box-shadow來做外部邊框。將background-images放在<img>元素的中間。

演示：http://jsfiddle.net/ThinkingStiff/bNmzB/

輸出：

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