背景颜色和边框半径之间的空白答案

【问题标题】：Empty space between background-color and border-radius背景颜色和边框半径之间的空白
【发布时间】：2018-08-24 09:49:16
【问题描述】：

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

有什么解决办法吗？

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>

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

从.container 中删除overflow:hidden
将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>

【讨论】：

我知道这种方法，但恐怕这是一个好习惯。外部和内部边界半径的值之间有什么联系吗？或者我应该尝试不同的值来适应空白空间？

【解决方案2】：

我不知道是什么原因，但我只是将父级 css 中的background-color color-block 更改为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>

【讨论】：