Question

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

 ____________________________    (gap)      __________________________
|                                                                     |
|                                                                     |

我试图创造的差距在TOP（忽略旁边的那些，只是为了强调它是一个div）。差距可能会或可能不会完全居中 - 换句话说，它可能会在差距存在的地方发生变化。

是否可以使用css执行此操作？

Answer 1

您可以使用绝对位于容器中的伪元素，背景颜色与页面背景无关。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

Answer 2

您可以使用2个伪元素执行此操作，例如

＆＃13;

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

＆＃13;

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

＆＃13;

如何创建一个有差距的自定义边框？

2 个答案: