3边的薄CSS边框在另一边渗入厚边框

Question

顶部边框为6px和绿色。左，右和底1px #ccc。 1px边框正在流入6px，请参阅小提琴示例。 http://jsfiddle.net/AzHUt/34/

div汤以外的任何解决方案？

Answer 1

对我而言，这看起来就像它的作用一样 - 将所有边的边框宽度设置为10px，将顶边边框的边框宽度设置为30px以便更清楚地看到这一点：http://jsfiddle.net/AzHUt/21/

如果你想让它看起来像一个顶部带有粗体条的“窗口”，你需要另一个标记（就像你说的那样“div汤”）。

编辑：我认为这是你所期望的：http://jsfiddle.net/AzHUt/28/ - 它只是标记的一点点变化，为它添加了另一个div（丑陋，但它完成了工作） ）

Answer 2

没有;你需要包括至少一个其他块：如果你将边界的宽度增加10倍;你会明白为什么：所有颜色和宽度都是同一个边框的一部分;浏览器无法知道哪个“更重要”。

然而，您实际上并不需要任何标记更改;一个CSS2生成的框也会这样做（虽然它很笨笨恕我直言）：http://jsfiddle.net/AzHUt/33/