html - Flex 项目的内部边框有间隙

Question

我正在尝试创建带有间隙的内部边界。我尝试使用:after伪元素创建边框，但:after元素不可见。

.view {
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -5px 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: yellow;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.content:after{
   content: '';
   background: black;
   position: absolute;
   bottom: 5px; 
   width: 2px;
   height: 20px;
   right: -10px;    
}

.head {
  text-align: center;
}

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

我正在努力实现这个结果：

标签： htmlcssflexboxpseudo-element

Answer 1

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

.view {
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px 0 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: yellow;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

.content:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  right: -5px;
  background: yellow;
  z-index: 1111;
  border: 4px solid yellow;
}

.content:after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  background: yellow;
  z-index: 1111;
  border: 4px solid yellow;
}

.head {
  text-align: center;
}

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