CSS内部边框？

  • Z时代
  • 2024-01-10
  • 分类：问答

我纯粹用CSS创建了左边的按钮。它是一个div内的div。但是，右边的三个按钮是background属性上的img标签。我这样做是为了能够根据here的说明模拟翻转效果。CSS内部边框？

现在，有没有办法使用CSS添加的内部边界，如在第一个按钮，其他三个？

小提琴here。

回答：

按照box model，填充是内容之间边界。您应该能够样式化相似图片：

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

这里的双边框的DEMO如上所述。

回答：

使用与按钮相同的方法 - 将图标作为背景图像处理为内部div。所以，你应该有一些填充，内格（在你的情况IMG）一个div白色边框和背景图像（图标）。

回答：

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

background-position: center center;

，以确保图标停留在较小的范围内IMG居中，和/或

background-size: 24px 24px;

规模的背景下来了一点，所以白边没有按” t碰到符号。

回答：

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

以上是 CSS内部边框？ 的全部内容， 来源链接： utcz.com/qa/259641.html

回到顶部