Javascript CSS 内边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9051228/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Inner Border?
提问by john
I created the button on the left purely with CSS. It is a div within a div. However, the three buttons on the right are backgroundproperties on imgtags. I did this so I could simulate a rollover effect following instructions from here.
我纯粹用 CSS 创建了左侧的按钮。它是一个 div 中的一个 div。但是，右侧的三个按钮是标签上的background属性img。我这样做是为了可以按照此处的说明模拟翻转效果。
Now, is there a way to add the inner border, as in the first button, to the other three using CSS?
现在，有没有办法使用 CSS 将第一个按钮中的内边框添加到其他三个按钮中？
Fiddle here.
在这里摆弄。
回答by paislee
According to the box model, padding is between the contentand border. You should be able to style the images like:
根据盒模型，内边距位于内容和边框之间。您应该能够对图像进行样式设置，例如：
.img-btn {
background: #FFF; // inner border color
padding: 2px; // inner border width
border: 2px solid #[yourgreen]; // outer border
}
You shouldn't need any extra divs to accomplish this, even for your pure CSS button. Following style is for the case when the image is a background-image:
您不需要任何额外的divs 来完成此操作，即使对于纯 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;
}
Here's a DEMOof double-border as described above.
这是上面描述的双边框的DEMO。
回答by ThinkingStiff
You don't need two <divs>and an <a>to do the button. You can do it with a single <a>. For both the images and the button you can use box-shadowto do the outer border. Center the background-imagesin the <img>elements.
你不需要两个<divs>和一个<a>来做按钮。你可以用一个<a>. 对于图像和按钮，您都可以box-shadow用来做外边框。background-images将<img>元素居中。
Demo: http://jsfiddle.net/ThinkingStiff/bNmzB/
演示：http: //jsfiddle.net/ThinkingStiff/bNmzB/
Output:
输出：
HTML:
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:
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;
}
回答by kinakuta
Use the same approach as you did for the button - just treat the icons as background images to the inner div. So you should have a div with some padding, an inner div(in your case img) with a white border, and a background image (the icons.)
使用与按钮相同的方法 - 只需将图标视为内部 div 的背景图像。所以你应该有一个带有一些填充的 div，一个带有白色边框的内部 div（在你的情况下是 img）和一个背景图像（图标）。
回答by bgun
Assuming you can't modify the icon images directly, just wrap them in a div in the same way as "Add to Cart". You'll also need to use either
假设您不能直接修改图标图像，只需将它们以与“添加到购物车”相同的方式包装在一个 div 中。您还需要使用
background-position: center center;
to ensure that the icon stays centered within the smaller img, and/or
确保图标在较小的 img 内居中，和/或
background-size: 24px 24px;
to scale the background down a bit so the white border doesn't run into the symbols.
将背景缩小一点，这样白色边框就不会碰到符号。
