带有 CSS 的图像的内边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19159977/
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
Inner border over images with CSS?
提问by user2369812
I would like to add a white border over all my images in my content div using css. Images in the header and footer div areas should not be affected. how do I achieve this? See example image below. There are images of different sizes on the web pages.
我想使用 css 在我的内容 div 中的所有图像上添加一个白色边框。页眉和页脚 div 区域中的图像不应受到影响。我如何实现这一目标？请参阅下面的示例图像。网页上有不同大小的图像。
See image:
见图片：
回答by cimmanon
You can do this without having an extra element or pseudo element:
您可以在没有额外元素或伪元素的情况下执行此操作：
http://cssdeck.com/labs/t6nd0h9p
http://cssdeck.com/labs/t6nd0h9p
img {
outline: 1px solid white;
outline-offset: -4px;
}
IE9&10 do not support the outline-offset property, but otherwise support is good: http://caniuse.com/#search=outline
IE9&10 不支持outline-offset 属性，其他方面支持还是不错的：http: //caniuse.com/#search=outline
Alternate solution that doesn't require knowing the dimensions of the image:
不需要知道图像尺寸的替代解决方案：
http://cssdeck.com/labs/aajakwnl
http://cssdeck.com/labs/aajakwnl
<div class="ie-container"><img src="http://placekitten.com/200/200" /></div>
div.ie-container {
display: inline-block;
position: relative;
}
div.ie-container:before {
display: block;
content: '';
position: absolute;
top: 4px;
right: 4px;
bottom: 4px;
left: 4px;
border: 1px solid white;
}
img {
vertical-align: middle; /* optional */
}
回答by nkmol
You could try this:
你可以试试这个：
Html:
网址：
<div class="image">
<div class="innerdiv">
</div>
</div>
Css:
css：
.image
{
width: 325px;
height: 239px;
background:url(http://www.modernvice.com/files/images/backgrounds/_Zoom/black-pony.jpg) 0 0 no-repeat;
padding: 10px;
}
.innerdiv
{
border: 1px solid white;
height:100%;
width: 100%;
}
Hope this is what you meant :)
希望这就是你的意思:)
回答by Vikas Ghodke
You can do something like this DEMO
你可以做这样的事情DEMO
HTMl
网页版
<div class="imgborder">
<div class="in-imgborder">
</div>
</div>
CSS
CSS
.imgborder {
width: 300px;
height: 300px;
position: relative;
background: url(http://placekitten.com/300/300) no-repeat;
}
.in-imgborder {
width: 290px;
height: 290px;
position: absolute;
top: 4px;
left: 4px;
border: 1px solid red;
}
回答by Pogrindis
Whatever the div ID or class is you can simply add
无论 div ID 或类是什么，您都可以简单地添加
#yourDivIDExample {
...
}
#yourDivIDExample img{
border:1px solid #ffffff;
}
This will create a border around the images in the div itself.. same works for classes or global rule also ..
这将在 div 本身的图像周围创建一个边框..同样适用于类或全局规则也..
img {
border:1px solid #ffffff;
}
回答by Calsal
I solved this with box-shadow: insetand it works with IE11 and up. I wanted a border in the corners around the image but this examples have the border 10pxinset. It requires a parent divwith :beforeor :afterelement but handles it very well.
我解决了这个问题box-shadow: inset，它适用于 IE11 及更高版本。我想在图像周围的角落有一个边框，但这个例子有边框10px插入。它需要一个div带有:before或:after元素的父元素，但处理得很好。
.image {
width: 100%;
height: auto;
}
.image__wrapper {
position: relative;
}
.image__wrapper:before {
content: '';
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
box-shadow: inset 0 0 0 3px red;
}
