如何创建带有间隙的自定义边框？答案

【问题标题】：How to create a custom border with a gap?如何创建带有间隙的自定义边框？
【发布时间】：2017-02-03 00:43:19
【问题描述】：

我需要在顶部周围创建一个顶部边框，留下部分间隙。比如：

 ____________________________    (gap)      __________________________
|                                                                     |
|                                                                     |

我试图创建的差距在顶部（忽略侧面的差距，这只是为了强调它是一个 div）。间隙可能完全居中，也可能不完全居中 - 换句话说，间隙存在的位置可能会有所不同。

是否可以用 css 做到这一点？

【问题讨论】：

相关 - stackoverflow.com/questions/31205386/…

标签： css border

【解决方案1】：

您可以使用绝对定位在容器中的伪元素，其背景颜色与您的页面背景相匹配。

div {
  height: 100px;
  border: 1px solid black;
  position: relative;
}
div:after {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  content: '';
  background: #fff;
  width: 100px;
  height: 1px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以用 2 个伪元素来做到这一点，像这样

div {
  position: relative;
  width: 60%;
  height: 80px;
  border: 1px solid gray;
  border-top: none;
  margin: 10px;
}
div::before, div::after {
  content: '';
  position: absolute;
  top: 0;
  width: 40%;
  height: 1px;
  background: gray;
}
div::before {
  left: 0;
}
div::after {
  right: 0;
}

div + div::before {
  width: 20%;
}
div + div::after {
  width: 60%;
}

<div>
</div>
<div>
</div>

【讨论】：