如何用CSS消除外层圆角div内内层header的顶部留白并填充圆角？

嘿，这个小问题我太熟了，分分钟帮你搞定！

为啥会出现这个情况？ #

你给外层的#widget加了border-radius，但默认情况下CSS不会让子元素被父元素的圆角自动裁剪，再加上内层的.header没匹配对应的圆角设置，就会出现顶部角落留白——说白了就是外层div的边框/底色露出来了，显得像空白。

两种简单解决方案 #

方案1：给外层容器加overflow: hidden（首推！） #

只需要在#widget的CSS里加一行overflow: hidden，内层的背景就会被外层的圆角“切”掉多余部分，完美填满角落：

#widget {
  position: fixed;
  left: 340px;
  top: 75px;
  width: 450px;
  height: 500px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 0 4px 0;
  border-radius: 10px; /* 补全你没写完的圆角值 */
  overflow: hidden; /* 就是这行关键代码！ */
}

.header {
  background-color: blue; /* 你的蓝色背景设置 */
  /* 其他样式正常编写即可 */
}

这个方法最省心，以后你要是改外层的圆角大小，内层自动跟着适配，不用再调整内层样式。

方案2：给内层元素设匹配的顶部圆角 #

要是你因为某些原因不能给外层加overflow: hidden（比如外层有元素需要超出圆角显示），那直接给.header加和外层顶部一致的圆角就行：

.header {
  background-color: blue;
  border-top-left-radius: 10px; /* 值和#widget的border-radius保持一致 */
  border-top-right-radius: 10px;
  /* 其他样式 */
}

这样内层的顶部圆角和外层完全对齐，蓝色就会填满角落啦。

额外检查点 #

别忘了看看.header和#widget之间有没有默认的margin或者padding，要是内层元素和外层顶部之间有空隙，也会出现类似的留白哦！

内容的提问来源于stack exchange，提问作者stone rock