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

时间:2011-01-26 14:34:54

标签: css

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

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

2 个答案:

答案 0 :(得分:8)

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

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

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

答案 1 :(得分:1)

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

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