Question

我有圆角的外部div。它的孩子没有圆角，但我希望外部div的圆角覆盖孩子们的角落。

我使用了第一个孩子和最后一个子选择器来完成它，它只适用于新设备（新版本的浏览器）。

这是我的代码：

CSS:
.external
{
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border: 1px solid #68ACDD;
    margin: 0 0 1px 0;
    overflow: hidden;
}
.external:first-child
{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.external:last-child
{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
table.address-table
{
    background: white;
    border-color: #68acdd;
    border-collapse: collapse;
}

HTML:
<div class="external">
    <table class="address-table">
        <tr class="">
            <td>some text</td>
        </tr>
    </table>
    <table class="address-table">
        <tr class="">
            <td>some other text</td>
        </tr>
    </table>
    <table class="address-table">
        <tr class="">
            <td>some other text</td>
        </tr>
    </table>
</div>

并在JSFiddle

我的问题在于旧设备（使用旧浏览器）：角落不存在（它只是一个白色）。我怎么能用旧的方式解决它？内部元素建立在运行时上，所以我可以有一些逻辑并在需要的地方插入边框，但我正在寻找更优雅的方式（仅使用html和css）。

有什么建议吗？

外部元素的圆角

0 个答案: