Html css表格单元格布局中的圆角？

我的设计需要一些帮助。我想显示三个相等的高度 相邻的盒子，如ASCI艺术：

+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+

我也有

盒子里的东西高度不同。棘手的是 这些盒子也需要有圆角。为此，我使用了 “滑动门”技术。基本上，框的标记是 像这样：

<div class="box">
  <div class="box-header">
    <h4>header</h4>
  </div>
  <div class="box-body">
    <p>Contents</p>
  </div>
</div>

标题
内容

四个块元素，因此我可以使用 背景图像。右上角在h4上。左上角 角在箱头上。右下角位于外侧 长方体div，左下角位于长方体上

我正在使用CSS显示：表格单元格使所有三个框相等 身高，但我的问题开始了。所有长方体元素现在都是 高度相等，但长方体元素的高度不相等，因为 内容物高度不相等。结果：右下角 位置不正确。另请参见我发布的链接

我怎样才能解决这个问题？现在所有的盒子都是一样高的。我会的 像长方体一样展开以使用所有可用高度，即使 内容很短。我试过身高：100%，但不起作用。我怎么能 能做到吗

或者有没有其他方法来实现我想要的？我不能用 类似于人造柱，因为我定义了中框的宽度 ems。这意味着我不能给box div一个单一的背景图像 提供两个底角

谷歌在这方面毫无用处。任何涉及“角落”的查询 “表格”只是给了我无数的链接到1990年的教程，这些教程使用 用于圆角的3x3桌子

至于浏览器兼容性，如果IE7/8也能解决这个问题就好了，但这不是必需的（在这种情况下，我可以用不等高的浮动代替）。对于我正在开发的网站，我估计IE的市场份额为20%或更少。我根本不在乎IE6

---

非常感谢任何提示

如果您不介意添加一点额外的标记，您可以实现这种效果。当然，我并不真的提倡代码膨胀，但是如果你必须完成它，你可以把盒子双层包装，让底部的角落在每个包装中。用

显示：表格单元格设置内包装的高度，您应该是金色的。
可以使用body元素的属性吗？
尝试将body设置为显示：表格单元格？这可能会迫使它将三个长方体渲染到相同的高度，并将圆角边框也渲染到底部。
有一种解决方案，它在和中起作用。它在IE中不起作用，也不起作用（据我测试，甚至在10.0b中也不起作用）。它使用CSS3属性。由于该功能仍然包含在工作草案中，而不是建议中，浏览器仅使用其特定前缀来实现它：

#boxes {
    display: table;
    border-spacing: 1em;
}
.box-row { display: table-row; }
.box {
    width: 16em;
    display: table-cell;
    padding-right: 2em;
    border-image: url(box.png) 6 8 6 8 stretch; // this line actually does not influence rendering in any engine
    -o-border-image: url(box.png) 6 8 6 8 stretch;
    -khtml-border-image: url(box.png) 6 8 6 8 stretch;
    -icab-border-image: url(box.png) 6 8 6 8 stretch;
    -webkit-border-image: url(box.png) 6 8 6 8 stretch;
}

使用它实际上需要您重新创建背景图像，但这是一个细节。
根据我上面的评论，我决定使用CSS3边界半径来解决我的问题。使用下面的语句，它将在除Internet Explorer之外的每个浏览器上显示圆形边框。我不太关心IE，所以IE用户可以简单地查看直角

.box {
    display: table-cell;
    width: 16em;
    padding: 1em 2em;
    background: #f6c75d url(gradient.png) repeat-x scroll top left;
    border: 3px solid #de9542;
    border-radius: 25px; /* Standard */
    -o-border-radius: 25px; /* Opera 10.x */
    -moz-border-radius: 25px; /* Mozilla/Firefox */
    -icab-border-radius: 25px; /* iCab */
    -khtml-border-radius: 25px; /* KHTML/Konqueror */
    -webkit-border-radius: 25px; /* Webkit/Safari/Chrome/etcetera */
}

在上面的例子中，gradient.png是一个小的可平铺图像，它在方框顶部提供渐变

它工作得很好。它还简化了标记和CSS，并减少了我需要的背景图像的数量和大小。
我希望你能理解这一点（我对这些论坛发布内容不熟悉）
作为一名平面设计师，HTML的“肮脏”是可怕的。
我知道这不是一个真正的HTML或CSS修复，因为它是一个简单的图形解决方案。
但它工作得很好，而且因为它是一个简单的gif图像，所以在不同的浏览器中都不会出现故障。
不利的一面是，由于反复试验，这需要时间，如果更改单元格中的内容量，则可能需要更改用作圆角矩形背景的图像

所以，有了这个警告

通过添加文本并测量单元格，或者查看图像大小（如果只有图像），以像素为单位，计算出所需表格单元格的大小

在图形程序中，创建任意颜色的矩形（如果网站上有白色文本，请说黑色等）
这个矩形是最底层

创建一个圆形矩形，例如，具有1像素的线条粗细，并且没有填充颜色（线条颜色可以是您选择的任何颜色，也可以是粗细…），该矩形位于基本填充矩形之上。
然后你会得到一个带有圆角的薄型轮廓的纯色正方形

我将圆角的未填充矩形缩小10像素（x-y），然后我可以在正方形上等距放置它

导出此图像，例如以GIF或JPEG格式导出

在您的网站中，在页面上单击希望圆角矩形所在的表格单元格，并将其设置为该单元格的背景图像。
确保单元格与图像大小相同，否则它将不适合或平铺。。。
然后，因为它是单元格的背景元素，所以放入单元格中的任何内容、文本或图像都将显示在背景图像的上方，使其看起来像是一个圆形表格单元格

如果您想使背景图像透明，可以将本机图像导出为带有透明度的gif（您可以使用带有更多颜色的Alhpa透明度的PNG，但我还不确定网页中是否完全支持PNG图像）
只需选择基本的纯色背景色，比如黑色，并将其添加为透明色

如果在整个页面中有一个使用CSS的背景图像，您可能需要透明，但是，请注意，根据使用的图像，它可能会使阅读文本变得困难

我希望这能有所帮助。
+1因为我不关心IE6，不幸的是，它不起作用。我不能把它放在盒子上，因为我不知道要放多久。A.