5

这个问题最好用截图来解释：http: //i42.tinypic.com/2ccvx91.jpg

包装器 div 有一个城市的背景图像。

#wrapper {
    background:url('city.jpg');
}

在那个 div 里面是一堆“square”类的其他 div：

.square {
    width:40px;
    height:40px;
    background-color:#27272f;
    opacity:.8;
    margin:2px;
}

由于不透明，您可以透过广场看到城市。但是你也可以看穿正方形之间的空间，我不希望它这样做。我只想能够通过 div 看到它后面的元素，它们之间的空间是纯黑色的。我怎样才能做到这一点？

谢谢。

4

2 回答 2

1

如何设置border 和使用包装器 div 来隐藏角落。您必须有一个负边距才能使重叠起作用

这是改编自 animuson 的 jsfiddle：

<div id="wrapper">
    <div class="hidingborder">
      <div class="square"></div>
    </div>
    <div class="hidingborder">
      <div class="square"></div>
    </div>
    <div class="hidingborder">
      <div class="square"></div>
    </div>
    <div class="hidingborder">
      <div class="square"></div>
    </div>
    <div class="hidingborder">
      <div class="square"></div>
    </div>
</div>​

这是CSS

#wrapper {
    background:Green;
    font-size:0;
}
.square {
    width:40px;
    height:40px;
    background-color:#27272f;
    opacity:.8;
    border:2px solid black;
    border-radius:5px;
    display:inline-block;
    margin:-2px;
}
.hidingborder
{
   border:#27272f solid;
   display:inline-block; 
}
​
于 2012-04-08T05:48:23.080 回答
1

最好的选择是删除边距......并给你的 div 边框 2 px ..

于 2012-04-08T05:51:24.950 回答