CSS空出一个div？

Question

我有3个元素叠在一起。顶部元素是叠加内容。第二个元素是背景边框图像。底部元素是背景。

我想要做的是将中间元素挖空，这样我就可以通过顶部元素看到底部元素，但是将中间元素的边框留在顶部元素周围。

http://jsbin.com/unimux/4/edit

如您所见，中间元素阻挡了底部元素的视图。

编辑：我确实尝试使用border-image，但是对于我来说，使用border-radius会无法正确渲染。

Edit2：是否可以使用border-image获得所需的效果？对任何可以使边界图像看起来不那么糟糕的人都感到荣幸。

Edit3：基于Zuul答案的一些进展： http://jsbin.com/unimux/15/edit

Answer 1

对于当前的CSS状态，你无法真正做到这一点。也许只是将底部元素放在中间元素之上，然后工作？

Answer 2

使用类（例如.apple）设置一个新元素，并将其放在所有其他现有元素上，并使用与底部元素相同的图像：

查看您的JS Bin Example已更改！

  div.apple {
    margin: 100px;
    width: 200px;
    height: 200px;
    background: url(http://www.ipadwallpapersonly.com/images/wallpapers/1gk0rv4ng.jpg) center center;
  }

让图像居中并给出正确的边距值，它可以模拟＆＃34;空心＆＃34;效果在div.middle。

查看结果预览：

---

如果元素维度不相同，则使用CSS position有助于将所有内容保存到适当的位置：

示例here！

Answer 3

根据egasimus，你无法用CSS真正做到这一点。

尝试类似this之类的内容，有四个div创建“窗口”。