CSS内边框？

Question

我完全使用 CSS 创建了左侧的按钮。它是一个div中的一个div。但是，右边的三个按钮是img 标签上的background 属性。我这样做是为了可以按照here 的说明模拟翻转效果。

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

小提琴here.

Answer 1

使用与按钮相同的方法 - 只需将图标视为内部 div 的背景图像。因此，您应该有一个带有一些填充的 div、一个带有白色边框的内部 div（在您的情况下为 img）和一个背景图像（图标）。

Answer 2

根据box model，填充在content和border之间。您应该能够为图像设置如下样式：

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

您不需要任何额外的divs 来完成此操作，即使对于您的纯 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 3

假设您不能直接修改图标图像，只需将它们包装在一个 div 中，就像“添加到购物车”一样。您还需要使用任一

background-position: center center;

确保图标在较小的 img 中居中，和/或

background-size: 24px 24px;

将背景缩小一点，这样白色边框就不会碰到符号。

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