html - 将内容放在圆 Angular 框内

Question

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

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

当我尝试“溢出:隐藏；”在父框上，内容(蓝色框)刚刚下降:

.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 个 Angular ，那么你需要使用特定的属性:

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>