带填充的边缘图像

Question

我希望给我所有的媒体这样一个预设的风格http://prntscr.com/7b8w3g

目前，我通过给img标签一个10px的padding +背景色作为灰色来给灰色背景，但是当我给它边框时，它形成在外部填充区域，而我想要细边框像上面的截图一样粘在图片上。上面的图片是通过inline +div完成的，但我想把它预先设置好，这样我所有的图片默认都有它，我网站上目前所有的图片都有它。知道怎么做吗?URL (http://www.freedomgolf.com.au/)

谢谢! !

Answer 1

这可以通过(CSS):

img{
    border: 1px solid #999;
    box-shadow: 0 0 0 10px #E5E4E2;
}

小提琴:https://jsfiddle.net/lmgonzalves/on27squo/2/

参考:https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

Answer 2

针对您的具体问题，这里有一个想法，即用更大的&轻一:

img {
  background-color: #232323; // set the color of the dark thin border
  padding: 1px; // padding width make your thin dark border
  border: 10px solid #b2b2b2; // border make the grey area surrounding the thin border
}

不加注释运行:

img {
  background-color: #232323;
  padding: 1px;
  border: 10px solid #b2b2b2;
}

希望我能帮忙。:)