CSS 内边框？

我纯粹用 CSS 创建了左侧的按钮。它是一个div 中的一个div。然而，右侧的三个按钮是background属性于img标签。我这样做是为了按照以下说明模拟翻转效果here http://kyleschaeffer.com/best-practices/pure-css-image-hover/.

现在，有没有办法使用 CSS 将内部边框（如第一个按钮）添加到其他三个按钮？

Fiddle here http://jsfiddle.net/6gB8j/.

根据盒子模型 http://www.w3.org/TR/CSS2/box.html，填充位于content and border。您应该能够像这样设置图像样式：

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

你不应该需要任何额外的div即使对于纯 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 http://jsfiddle.net/rgrFs/如上所述的双边框。