Question

因此，我希望Firebase中的文档与Google的UI具有相似的边界。 https://firebase.google.com/docs/cloud-messaging/ 您可以在导航栏下方的蓝色大框中看到一个选项卡列表。通过在顶部也具有弯曲半径，如何实现在选项卡上添加底部边框？我了解如何使用css创建底部边框，但对如何添加顶部曲线一无所知。

.navbar-light .navbar-nav .nav-link {
    border-bottom: 2px Solid #fff;
}

Answer 1

.navbar-light .navbar-nav .nav-link::after {
    border-radius: 5px 5px 0 0;
    bottom: 0;
    height: 5px;

}

他们实际上是通过::after添加一个伪元素并对其进行自定义。您可以根据需要自定义此样式。

Answer 2

好吧，我尝试使用边框左上和右上属性修复此问题：看看，这可能对您有帮助

#example1 {
  border: 2px solid #0277bd;;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
}

<div>Document</div>
<div id="example1">
</div>

如何自定义像Google的CSS边框？

2 个答案: