CSS内边框？

Question

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

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

小提琴here。

Answer 1

根据box model，填充位于内容和 border 之间。您应该可以设置图像的样式，如：

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

即使对于纯CSS按钮，也不需要任何额外的div来完成此任务。以下样式适用于图像为背景图像的情况：

.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

您不需要两个<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;       
}

Answer 3

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

Answer 4

假设您无法直接修改图标图像，只需将其包装在div中，方法与“添加到购物车”相同。你还需要使用

background-position: center center;

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

中保持居中

background-size: 24px 24px;

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