带接缝的堆叠边框盒子？

Question

我不知道用什么更好的方式来描述它，但我正在尝试重新创建一个看起来像 this 的边框，因此所有 nav-link 周围和中间的边框] 元素，外角为方形，内角为圆角（这使它们看起来有点像两个盒子连接的关节）。我得到的最接近的是您在下面的代码片段中看到的内容。

可能根本就没有边框，但那又如何呢？它也不是链接顶部的 png 图像或类似的东西，因为它是响应式的。我是 CSS 的初学者，所以这就是我自己能想到的所有选项。

.container-fluid {
    background-color: #105565;
    padding-top: 10px;
    padding-bottom: 10px;
}
   
.navbar-nav {
    border: solid 2px white;
    margin: 10px;
}
    
#navinc .nav-link {
    border: solid 2px white;
    border-radius: 5px;
    background-color: #105565;
    font-family: 'roboto';
    font-size: 14px;
    font-weight: 400;
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
    </head>
<body>
   <div class="container-fluid">
        <ul class="navbar-nav" id="navinc">
          <li class="nav-item">
            <a class="nav-link home" aria-current="page" href="#carousel">HOME</a>
          </li>
          <li class="nav-item">
             <a class="nav-link over" aria-current="page" href="#">OVER</a>
          </li>
          <li class="nav-item">
            <a class="nav-link merken" aria-current="page" href="#">MERKEN</a>
          </li>
          <li class="nav-item">
            <a class="nav-link team" aria-current="page" href="#">TEAM</a>
          </li>
          <li class="nav-item">
            <a class="nav-link contact" aria-current="page" href="#">CONTACT</a>
          </li>
        </ul>
   </div>
</body>

Answer 1

您可以通过向 navbar-nav 添加白色背景颜色和 border-radius 来做到这一点。

.container-fluid {
    background-color: #105565;
    padding-top: 10px;
    padding-bottom: 10px;
}
   
.navbar-nav {
    border: solid 2px white;
    margin: 10px;
    background-color: white;
    border-radius: 4px;
}
    
#navinc .nav-link {
    border: solid 1px white;
    border-radius: 5px;
    background-color: #105565;
    font-family: 'roboto';
    font-size: 14px;
    font-weight: 400;
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
}

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
    </head>
<body>
   <div class="container-fluid">
        <ul class="navbar-nav" id="navinc">
          <li class="nav-item">
            <a class="nav-link home" aria-current="page" href="#carousel">HOME</a>
          </li>
          <li class="nav-item">
             <a class="nav-link over" aria-current="page" href="#">OVER</a>
          </li>
          <li class="nav-item">
            <a class="nav-link merken" aria-current="page" href="#">MERKEN</a>
          </li>
          <li class="nav-item">
            <a class="nav-link team" aria-current="page" href="#">TEAM</a>
          </li>
          <li class="nav-item">
            <a class="nav-link contact" aria-current="page" href="#">CONTACT</a>
          </li>
        </ul>
   </div>
</body>

带接缝的堆叠边框盒子？

Stacked bordered boxes with joints?

html

css

menu

border