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

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

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