CSS 父子元素 border-radius 继承之背景空隙处理

1. 问题说明

比如我们要实现一个圆角边框的卡片，很容易想到下面的代码实现：

html

<div class="card">
    <div class="card-header">header</div>
    <div class="card-body">body</div>
</div>

css

.card {
    width: 200px;
    height: 100px;
    background-color: #000;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
}

.card-header {
    height: 40px;
    background-color: #fafafa;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.card-body {
    height: calc(100% - 40px);
    background-color: #fff;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

效果如下：

我们发现子元素圆角边框外还能看见父元素的黑色背景，也就是当父元素设置边框后，子元素继承 border-radius 会留下空隙。产生该问题的原因是父子元素 border-radius 半径不一样，差一个边框的宽度。

2. 解决方案

以下总结了两种解决方案：

1. 子元素不设置 border-radius，为父元素设置 overflow: hidden；
2. 修正子元素 border-radius，将子元素 border-radius 设置为父元素 border-radius 减去父元素边框宽度。

2.1 设置 overflow: hidden

css

.card {
    width: 200px;
    height: 100px;
    background-color: #000;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
}

.card-header {
    height: 40px;
    background-color: #fafafa;
}

.card-body {
    height: calc(100% - 40px);
    background-color: #fff;
}

效果如下：

该方案的缺点是：由于设置了 overflow，超出父元素的部分会被隐藏，像使用 box-shadow 为父元素添加阴影时会不显示（可以通过添加合适的 margin 解决）。

2.2 修正子元素 border-radius

css

.card {
    width: 200px;
    height: 100px;
    background-color: #000;
    border: 1px solid #d9d9d9;
    border-radius: 10px;
}

.card-header {
    height: 40px;
    background-color: #fafafa;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
}

.card-body {
    height: calc(100% - 40px);
    background-color: #fff;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
}

效果如下：

推荐使用该方案。

3. 总结

很多 UI 框架在处理类似问题时都是简单的将父子元素设置相同的 border-radius，当背景不明显时可能注意不到，但是放大后仔细观察就会发现存在空隙。