问题：

有接缝的堆叠有边框的盒子？

衡高寒

2023-03-14

我不知道如何更好地描述它，但我试图重新创建的是一个类似于这样的边框，所以所有nav-link元素周围和之间都有边框，外角是方形的，内角是圆角的（这使它们看起来有点像两个盒子连接的连接处）。我得到的最接近的是您可以在下面的代码片段中看到的内容。

可能根本就没有边框，但怎么做呢？它也不是链接上面的png图像或类似的东西，因为它是响应性的。我是CSS的初学者，所以这是我自己能想到的所有选项。

null

.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>

null

共有1个答案

施茂

2023-03-14

您可以通过向navbar-nav添加白色背景色和边框半径来实现这一点。

null

.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>

类似资料：

有效地将盒子堆叠成最少数量的堆叠？

我在一个在线编码挑战中遇到了这个问题。给定一个长度和宽度为(l，h)的盒子列表，输出包含所有盒子所需的最少堆叠数量，如果一个盒子的长度和宽度小于另一个盒子的长度和宽度，则可以将一个盒子堆叠在另一个盒子的顶部。我不知道如何想出一个多项式时间解决方案。我已经构建了一个蛮力解决方案，它递归地创建所有可能的堆栈排列（从N个堆栈开始。然后对于每个堆栈，尝试将其放在其他堆栈的顶部。然后递归地生成给定新堆栈
CSS中具有边框折叠的表格边框颜色

问题内容：我想在表格中某个字段的上方放置一条线，以表明它是上述值的总和。但是，该表默认情况下已经带有边框。这是一个示例：我有一张折叠了边框的桌子。我将边框底部设置在一个字段上，将边框顶部设置在其下方的字段上。这两个都指定相同的边框。使用最上面的CSS。有没有一种方法可以使用最底层的？这显示了两个单元格之间有一条红线。有办法获得金线吗？问题答案：这是的已定义行为。《 O’Reilly CS
边框-具有边框半径的图像-但没有边框颜色覆盖

我想创建一个透明的圆形按钮，点击它应该有条带边框。我想用HTML、CSS或者必要的java脚本来实现这一点。以下是一个示例：https://jsfiddle.net/chrichrichri/a9dpg582/38/ 结合：到目前为止，我在Firefox中对其进行了测试-边框图像考虑了边框半径，但始终存在边框颜色覆盖-如果我有50%的透明度，我会看到条带和选定的颜色-但我只想要条带…如果我使用
堆叠的半透明盒子的颜色取决于订单？

问题内容：为什么两个堆叠的半透明盒子的最终颜色取决于顺序？如何使两种情况下的颜色相同？问题答案：仅仅是因为在两种情况下，由于顶层的不透明度如何影响底层的颜色，颜色的组合并不相同。对于第一种情况，您会在顶层看到 50％的蓝色和50％的透明。通过透明部分，您可以在底层看到50％的红色（因此，我们总共只能看到 25％的红色）。第二种情况的逻辑相同（红色的50％和蓝色的25％
android中没有边框的形状

我试图使用这个SO答案使线性布局的角变圆。所以这是我的shape.xml：但这给了我一个有着丑陋的黑色边框的矩形。它在另一个具有美丽背景图像的线性布局中看起来很可怕。我想去掉那条黑边。我搜索了其他SO帖子和google，结果发现我可以使用图层隐藏一些边框。不可能使用上述形状的一些技巧。直接使用xml？编辑：这是我的主要布局.xml：编辑2：这是ide中的截图（截图）：
Java摆动边框和盒子布局

我有一个Jtable，现在我想在这个Jtable上方的一行中有一个JLabel和一个JTextField和一个JButton。我该怎么做？直到现在我有了这个：现在，我在上面添加了以下内容：但是怎么做呢，这里有一个：“Filter：TEXTFIELD BUTTON”，下面是表格？

有接缝的堆叠有边框的盒子？

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档