将内容放在圆角框中

Question

将内容放置在带有圆角的box div内以使其不会重叠的正确方法是什么？

蓝框是内容div，位于白框父div内。我希望标题位于该父框中，以便它的顶部也有圆角。

当我尝试“溢出：隐藏”时在父框上，内容（蓝色框）刚刚下降：

.WhiteBox {
  box-sizing: border-box;
  color: rgb(17, 17, 17);
  max-width: 340px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
  padding-bottom: 30px;
  margin: 65px auto 45px;
  border-radius: 12.5px;
}

.BlueBox {
  background-color: rgb(50, 116, 186);
  height: 35px;
}

Answer 1

特定的CSS属性

如果您希望border-radius少于4个角，则需要使用特定的属性：

border-top-right-radius: 12.5px;
border-top-left-radius: 12.5px;

演示

body {
  background: #000;
}

.wbox {
  box-sizing: border-box;
  color: rgb(17, 17, 17);
  max-width: 340px;
  background-color: rgb(255, 255, 255);
  box-shadow: rgba(118, 143, 255, 0.1) 0px 16px 24px 0px;
  padding-bottom: 30px;
  margin: 65px auto 45px;
  border-radius: 12.5px;
}

.bbox {
  background-color: rgb(50, 116, 186);
  height: 35px;
  border-top-right-radius: 12.5px;
  border-top-left-radius: 12.5px;
}

<section class='wbox'>
  <div class='bbox'></div>
</section>