Question

我正在尝试制作一个带圆角的桌子，其标题和页脚的颜色与主表的颜色不同。理想情况下，页眉和页脚都将从父表继承，但能够单独舍入页脚/页眉对我的目的是好的。

tfoot{
    background: #ff0000;
    border-radius: 20px;
}

在我看来，直接给页脚一个边框半径应绕过角落，但这似乎不太合适。有什么想法吗？

Answer 1

为什么不做这件事：

<div id="table">

<div class="head">
    Table head
</div>

<div class="tablerow">
    Table row content
</div>

<div class="tablerow">
    Table row content
</div>

<div class="footer">
    Table footer
</div>

然后：

#table {
background-color: blue;
width:200px;
border-radius: 10px;
}

#table div {
padding: 5px;  
}

#table .head {
background-color: green;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#table .footer {
background-color: red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

这是一个小提琴：http://jsfiddle.net/VfVx9/

Answer 2

我认为这取决于您使用的浏览器，请尝试以下操作：

tfoot{
  background: #ff0000;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

Answer 3

http://jsfiddle.net/JLyrp/

.test {
    background: #0000ff;
    border-radius: 10px;
    width: 100px;
}
tfoot {
    background: #ff0000;
    border-radius:20px;
    display:block  //float or position:absolute also works
}

桌面页脚上的边框半径属性断开

3 个答案: