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

Question

我需要在留下部分间隙的顶部周围创建顶部边框。例如：

 ____________________________    (gap)      __________________________
|                                                                     |
|                                                                     |

我试图创建的差距在顶部（忽略侧面的差距，那只是为了强调它是 div）。间隙可能会或可能不会完全居中 - 换句话说，它可能会在间隙存在的地方发生变化。

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

Answer 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;
}

<div></div>

Answer 2

接受的答案有一个缺陷，如果希望间隙在其背景之上是“透明的”，那么如果背景不是纯色则行不通。

因此，要在任何背景（如图像、渐变等）上执行此操作，请使用两个伪元素，如下所示：

通过改变每个伪元素的宽度，可以控制间隙的位置及其大小。

body {
  background-image: linear-gradient(to right, orange , yellow);
}
div {
  position: relative;
  width: 80%;
  left: 10%;
  top: 45vh;
  transform: translateY(-50%);
  height: 80px;
  border: 1px solid black;
  border-top: none;
}
div::before, div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  background: black;
}
div::before {
  left: 0;
  width: 20%;
}
div::after {
  right: 0;
  width: 60%;
}

<div>
</div>

对于需要空白处文本的任何人，这里是 how-to。

body {
  background-image: linear-gradient(to right, orange , yellow);
}
div {
  position: relative;
  width: 80%;
  left: 10%;
  top: 45vh;
  transform: translateY(-50%);
  height: 80px;
  border: 1px solid black;
  border-top: none;
}
div::before, div::after {
  content: '';
  position: absolute;
  top: 0;
  height: 1px;
  background: black;
}
div::before {
  left: 0;
  width: 20%;
}
div::after {
  right: 0;
  width: 60%;
}

div span {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  text-align: center;
}
div span {
  left: 20%;
}
div span {
  right: 60%;
}

<div><span>Hello</span></div>

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

How to create a custom border with a gap?

css

border