背景色和邊框半徑之間的空白區域

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>