javascript - CSS 内边框？

Question

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

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

fiddle here .

Answer 1

根据box model ，填充位于内容和边框之间。您应该能够像这样设置图像样式:

 .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如上所述的双边界。