html - 背景颜色和边框半径之间的空白

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