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

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. 从overflow:hidden移除.container
2. 将border-radius:34px 34px 0 0;赋予.header

.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>