元素内的边框与边缘的空间

Question

如何为元素内部的元素添加边框，并在元素边缘之间留一个空格？用CSS

类似这样的事情

谢谢

编辑： 不能将图像用作背景，我希望它是一个img元素

Answer 1

您可以在图像周围使用容器/包装。

<强> CSS

div {
    position: relative;
    display:inline-block;
}
div:before {
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 0px 2px #fff;
    z-index:1;
    border: solid 10px transparent;
}

<强> HTML

<div>
    <img src="http://i.stack.imgur.com/OGZXN.png" alt="image">
</div>

<强> DEMO HERE

Answer 2

你现在可以尝试这样的事情。

.img-container {
  position: relative;
}
.border {
  height: 154px;
  width: 219px;
  border: 4px solid yellow;
  position: absolute;
  top: 8px;
  left: 8px;
}

<div class="img-container">
  <img src="http://i.stack.imgur.com/OGZXN.png">
  <div class="border"></div>
</div>

Answer 3

在div中创建div，图像为背景。给div你想要的边框和大小。并且因为html和css有时会很奇怪，你可能不得不在图像上移动div以负边距。 希望对你有帮助。

Answer 4

试试这个...

这是链接：http://jsfiddle.net/aqm7kjbg/15/

<强> HTML

<div>
 <img src="http://vignette1.wikia.nocookie.net/zimwiki/images/0/00/Gir.png/revision/latest?cb=20130712225209" width="200" />
 <span></span>
</div>

<强> CSS

img{
  border: 5px solid gray;
}
span{
  position:relative;
  top:-200px;
  left:-188px;
  border: 5px solid red;
  padding:150px 80px 170px 80px;
}