Html 带有间隙的弹性项目内边框_Html_Css_Flexbox_Pseudo Element

Html 带有间隙的弹性项目内边框

html css

Html 带有间隙的弹性项目内边框,html,css,flexbox,pseudo-element,Html,Css,Flexbox,Pseudo Element,我正在尝试创建带有间隙的内部边界。我尝试使用：after伪元素创建边框，但是：after元素不可见 .view{ 显示器：flex；弯曲方向：立柱；边界：无；溢出：隐藏； } .集装箱{ 显示器：flex；柔性包装：包装；边距：0-5px-5px 0； } .内容{ 显示器：flex；弯曲方向：立柱；对齐项目：居中；证明内容：中心；弹性：1；背景：黄色；填充：20px；右边框：1px纯黑；边框底部：1px纯黑； } .内容：之后{ 内容：''；背景：黑色；位置：绝

我正在尝试创建带有间隙的内部边界。我尝试使用

：after

伪元素创建边框，但是

：after

元素不可见

.view{
显示器：flex；
弯曲方向：立柱；
边界：无；
溢出：隐藏；
}
.集装箱{
显示器：flex；
柔性包装：包装；
边距：0-5px-5px 0；
}
.内容{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
弹性：1；
背景：黄色；
填充：20px；
右边框：1px纯黑；
边框底部：1px纯黑；
}
.内容：之后{
内容：''；
背景：黑色；
位置：绝对位置；
底部：5px；
宽度：2倍；
高度：20px；
右：-10px；
}
.头{
文本对齐：居中；
}


0
总余额
0
可用余额
0
命令
500
钱包余额
邮寄

可能有更好的方法可以做到这一点。但这是在不改变HTML布局的情况下完成的

.view{
显示器：flex；
弯曲方向：立柱；
边界：无；
溢出：隐藏；
}
.集装箱{
显示器：flex；
柔性包装：包装；
边距：0-5px0；
}
.内容{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
弹性：1；
背景：黄色；
填充：20px；
右边框：1px纯黑；
边框底部：1px纯黑；
位置：相对位置；
}
.内容：以前{
内容：“；
位置：绝对位置；
底部：0；
左：-5px；
右：-5px；
背景：黄色；
z指数：1111；
边框：4px纯黄色；
}
.内容：之后{
内容：“；
位置：绝对位置；
排名：0；
左：-5px；
右：-5px；
背景：黄色；
z指数：1111；
边框：4px纯黄色；
}
.头{
文本对齐：居中；
}


0
总余额
0
可用余额
0
命令
500
钱包余额
邮寄

我希望这能有所帮助

<!DOCTYPE html>
<html>
  <head>
    <style>

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view {
        background-color: yellow;
    }

    .topContainer {
        display: grid;
        grid-template-columns: repeat(3, 3fr);
        border-bottom: 1px solid #000;
    }

    .bottomContainer {
        display: grid;
        grid-template-columns: repeat(2, 3fr);
    }

    .content {
        padding: 25px;
        text-align: center;
        border-left: 1px solid #000;
    }

    .topContainer .content:first-child {
        border: none;
    }

    .bottomContainer .content:first-child {
        border: none;
    }

    </style>
  </head>
  <body>

    <div class="view">
      <div class="topContainer">
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Total balance</div>
            </div>
         </div>
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Available balance</div>
            </div>
         </div>
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Orders</div>
            </div>
         </div>
      </div>
      <div class="bottomContainer">
         <div class="content center">
            <div>
              <div class="val">500</div>
              <div class="head">Wallet balance</div>
            </div>
         </div>
         <div class="content center">
            <button class="val" type="button">Send</button>
         </div>
      </div>
    </div>

  </body>
</html>


.中心{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.视图{
背景颜色：黄色；
}
.topContainer{
显示：网格；
网格模板列：重复（3，3fr）；
边框底部：1px实心#000；
}
.底部容器{
显示：网格；
网格模板列：重复（2，3fr）；
}
.内容{
填充：25px；
文本对齐：居中；
左边框：1px实心#000；
}
.topContainer.content:第一个子级{
边界：无；
}
.bottomContainer.content:第一个子项{
边界：无；
}
0
总余额
0
可用余额
0
命令
500
钱包余额
邮寄

我正在尝试创建带有间隙的边界。请检查我问题中的屏幕截图。只需创建一个带边框的innerContainer类。在父容器中添加填充。谢谢你的回答，但是中间有一个水平的边框，中间的水平边框没有空隙，我把你的片段更新了一下，效果很好。感谢