css - 创建边界间隙

Question

我试图在 div 的边框内创建一个间隙以适合图像，类似于此:

有没有办法在纯 CSS 中做到这一点？我只能看到:

.box {
    background: url(img.png) bottom left;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
}

但我的问题是 border-right: 1px solid #eee; 在我的图像顶部创建了一条线，这当然不是我们想要的。

它需要响应。此图像是一个示例，但您已经了解了大概的意思。

Answer 1

是这样的吗？

http://jsfiddle.net/6Ufb5/

div {
    border: 1px solid #ccc;
    position: relative;
}
img {
    position: absolute;
    top: 10px;
    left: 10px;
}

给容器位置 relative 和 img absolute ，将它向左移动 10px 并从顶部向下移动 10px ，你就得到了你想要的。对于响应部分，这只是给容器和/或 img 一个百分比宽度。像这样:

http://jsfiddle.net/6Ufb5/2/