css表格单元格布局中的圆角？
我需要一些设计方面的帮助。我想要将三个等高的方框并排显示，就像下面的ASCI艺术：
+------+ +------+ +------+
| | | | | |
| | | | | |
| | | | | |
+------+ +------+ +------+我也有an example online (with all the CSS)。
盒子里的东西高度各不相同。棘手的是，这些盒子还需要有圆角。为此，我使用了“滑动门”技术。基本上，框的标记如下所示：
<div class="box">
<div class="box-header">
<h4>header</h4>
</div>
<div class="box-body">
<p>Contents</p>
</div>
</div>四个块元素，所以我可以用背景图像做圆角和边框。右上角位于h4上。左上角显示在信箱标题上。右下角位于外框div上，左下角位于箱体上。
我使用CSS display:table-cell来制作所有三个高度相等的框，但我的问题从这里开始。现在所有的box元素都具有相同的高度，但是box-body元素的高度不同，因为内容不是相同的高度。结果:右下角的位置不正确。另请参阅我发布的链接。
我怎么才能修复它呢？现在所有的盒子div的高度都是相等的。我希望盒体扩展到使用所有可用的高度，即使内容很短。我尝试了高度:100%，但这不起作用。我怎么才能做到这一点呢？
或者，有没有其他方法来实现我想要的？我不能使用像人造列这样的东西，因为我在ems中定义了框的宽度。这意味着我不能给box div提供一个提供两个底角的单一背景图像。
谷歌在这里完全是无用的。任何涉及" corners“和" table”的查询都会给出大量指向1990年代教程的链接，这些教程使用3x3表格表示圆角。
至于浏览器兼容性，如果IE7/8也能处理它就好了，但这不是必需的(在这种情况下，我可以用不等高的浮点数代替)。对于我正在开发的网站，我估计IE的市场份额是20%或更少。我一点也不关心IE6。
任何提示都非常感谢！
回答 6
Stack Overflow用户
发布于 2009-08-10 14:14:48
根据我上面的评论，我已经决定使用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，并减少了我需要的背景图像的数量和大小。
Stack Overflow用户
发布于 2009-08-07 10:48:50
有一个解决方案，可以在Safari，Firefox和Chrome中工作。它不能在IE中工作，也不能在Opera中工作(据我测试--甚至在10.0B中也不能)。它使用CSS3属性border-image。由于它仍然是工作草案中的功能，而不是建议，浏览器仅使用其特定的前缀来实现它：
#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;
}使用它实际上需要你重新创建背景图像，但这是一个细节。
Stack Overflow用户
发布于 2009-08-07 08:05:47
如果你不介意添加一些额外的标记，你可以达到这个效果。当然，我并不是真的提倡代码膨胀，但如果你必须完成它，你可以双包装盒子，让底部的角落在每个包装器中的一个。用display: table-cell设置你的内部包装器的高度，你应该是金色的。
https://stackoverflow.com/questions/1243507
复制相似问题
腾讯云开发者
