CSS内边框？

Question

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

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

小提琴这里.

Answer 1

根据盒子模型,填充在内容和边界之间.您应该能够像这样设置图像的样式:

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

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

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

这是如上所述的双边界演示.

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