Question

我的问题很简单，当高度为0px时，我希望顶部和底部边框重叠，这可能吗？

这是我的傻瓜：

<div class="test">

</div>

.test {
  width:          100px;
  height:         0px;
  border-style:   solid;
  border-color:   black;
  border-width:   1px;
}

Answer 1

是的，可能但不是border css属性。

我们的想法是使用:before伪元素绘制顶行，使用:after伪元素绘制底线。

具有类box的元素可以按如下方式设置样式：

.box:before,
.box:after {
  position: absolute;
  background: #000;
  content: '';
  height: 1px;
  right: 0;
  left: 0;
  top: 0;
}
.box:after {
  bottom: -1px; /* notice this value should be -1 */
  top: auto;
}

＆＃13;

.test {
  animation: example 2s linear infinite alternate;
  position: relative;
  background: orange;
  margin: 0 auto;
  width: 100px;
  height: 0;
}

.test:before,
.test:after {
  position: absolute;
  background: #000;
  content: '';
  height: 1px;
  right: 0;
  left: 0;
  top: 0;
}
.test:after {
  bottom: -1px;
  top: auto;
}
@keyframes example {
  0%   {height: 0;}
  100% {height: 100px;}
}

＆＃13;

<div class="test"></div>

＆＃13;

Answer 2

您可以在底部边框内添加另一个div，并删除大div上的底部边框。但我必须删除'身高'。

例如，请参阅小提琴。

HTML：

<div class="test">
<!-- uncomment me -->
<div class="bottomBorder"></div>
</div>

CSS：

.test {
  width: 100px;
  border: 1px solid #000;
  border-bottom: none;
}
.bottomBorder {
  border-top: 1px solid #000;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
}

https://jsfiddle.net/7zwury9q/1/

你也可以做位置相对＆amp;绝对的：

https://jsfiddle.net/7zwury9q/2/

当高度为0时，使div边框重叠

2 个答案: