Javascript CSS内边框？

我完全用CSS创建了左边的按钮。它是div中的div。但是，右侧的三个按钮是

img

标签上的

background

属性。我这样做是为了按照来自的说明模拟翻滚效果

现在，有没有一种方法可以使用CSS将第一个按钮中的内边框添加到其他三个按钮中

---

拨弄。

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

根据，填充位于内容和边框之间。您应该能够按照以下方式设置图像的样式：

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

---

这里有一个如上所述的双边框的示例。

假设您不能直接修改图标图像，只需将它们以与“添加到购物车”相同的方式包装在一个div中即可。您还需要使用

background-position: center center;

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

background-size: 24px 24px;

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

您不需要两个

和一个

输出：


HTML:



CSS:

#添加{
背景色：#9bc9c7；
边框：1px纯白；
盒影：02px#9bc9c7；
颜色：白色；
显示：内联块；
字体：标准13px/25px Helvetica，Arial，无衬线；
高度：25px；
右边距：6px；
文本对齐：居中；
文字装饰：无；
文本转换：大写；
宽度：120px；
垂直对齐：顶部；
}
#添加：悬停{
背景色：#eabeb2；
盒影：02px#eabeb2；
}
.图标{
背景色：rgb（155201199）；
边框：1px纯白；
盒影：02pxRGB（155201199）；
高度：25px；
右边距：3倍；
宽度：25px；
}
将其添加到图像本身不是更容易吗？首先，您将如何做到这一点？第二，假设不是。我想在这里设置的颜色和图像不冲突吗？@awfullyjohn不应该，你可以同时拥有背景颜色和背景图像。我会更新答案的。谢谢。我会这样做的开始这样做+1杠杆！不过，值得注意的是，
box shadow
是，因此浏览器兼容性可能是一个问题。特别是，约翰刚刚看到了你的演示链接。你可以用锚来按按钮。我更新了上面的代码。