css - 如何为内部和外部元素设置边框以防止出现双重边框

Question

我知道我们可以使用inset和ouset边框来为表格设置边框。

table{border: 1px inset #fff;}
td{border: 1px outset #fff;}

当我们使用 table 时，一切都很好，因为每件事都在 a 中td，并且您永远不会将元素或文本table直接放在标签中。

现在的问题是，当我们使用divs 做相同的样式时，会有很多问题。

1. 如果我们将文本或元素放在外部 div 中，我们不会在其右侧看到任何边框。
2. 第一个内部div没有边界在顶部。

这是使问题更具体的小提琴。
http://jsfiddle.net/v4D9q/

Answer 1

你必须使用插图/开头吗？

多几行css，但为什么不在外部的顶部/左侧/右侧放置边框，而只在内部元素上设置边框底部。

HTML：

<div class="outer">
    outer div (we dont see border in right side)
    <div class="inner">inner div</div>
    <div class="inner">inner div</div>
</div>

CSS：

.outer{
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-top: 1px solid #000;                
}
.inner{
    border-bottom: 1px solid #000; 
}

http://jsfiddle.net/PFhfF/