外部元素的圆角

时间:2015-12-22 13:00:41

标签: html css border

我有圆角的外部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 个答案:

没有答案