背景色和边框半径之间的空白区域

Question

我在绿色背景色和边框半径之间看到了一些空白(尤其是当我放大时(。

有什么解决办法吗？

https://codepen.io/anon/pen/oPjgJZ

.container{
width: 250px;
height: 300px;
background-color: antiquewhite;
border: solid 2px green;
border-radius: 40px;
overflow: hidden;
}
.header{
height: 15%;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}

<div class='container'>
<div class='header'>HeaderText</div>
</div>

Answer 1

试试这个：

1. 从.container中删除overflow:hidden
2. 给.headerborder-radius:34px 34px 0 0;

.container {
width: 250px;
height: 300px;
background-color: antiquewhite;
border: solid 2px green;
border-radius: 40px;
}
.header {
height: 15%;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
border-radius: 34px 34px 0 0;
}

<div class='container'>
<div class='header'>HeaderText</div>
</div>

Answer 2

我不知道是什么原因，但我只是在父级的 css 中将background-color色块更改为linear-gradient，以确保 15% 高度父级的背景颜色与标题具有相同的颜色。所以不再有任何空白。

.container{
width: 250px;
height: 300px;
border: solid 2px green;
border-radius: 40px;
overflow: hidden;
background: linear-gradient(to bottom, green, 15%, antiquewhite 15%);
}
.header{
height: 15%;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}

<div class='container'>
<div class='header'>HeaderText</div>
</div>