元素内部的边框与边缘 space

Question

如何为元素内部的元素添加边框，并在边框和元素的边缘之间添加 space？ CSS

像这样

谢谢

编辑：不能用图片做背景，我想做个img元素

Answer 1

在 div 中创建一个 div，并以图片为背景。给 div 您想要的边框和大小。而且因为 html 和 css 有时工作起来很奇怪，你可能必须将 div 移动到负边距的图像上。希望对你有帮助。

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

您可以在图片周围使用 container/wrapper。

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 4

试试这个...

这是 link：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;
}

元素内部的边框与边缘 space

Border inside the element with space with the edge

html

css

image

border