<div> 的过渡在另一个元素上创建了边框

Question

如果您将鼠标悬停在两个边框之间，您会在它们周围看到一个丑陋（但非常小）的边框。有人可以帮助我吗（请解释我为什么会得到这个结果）？我尝试在每个元素上设置透明边框 - 但没有效果。

此致，桑德罗

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.content {
  height: 100vh;
  width: 50vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.content .line-left {
  width: 3px;
  height: 100%;
  background-color: #286090;
  position: absolute;
  left: 25px;
  bottom: 0;
}

.content .line-left::after {
  content: '';
  width: 3px;
  height: 100%;
  background-color: #bfbfbf;
 position: absolute;
  bottom: 0;
}

.content .line-right {
  width: 3px;
  height: 100%;
  background-color: #286090;
  position: absolute;
  top: 0;
  right: 25px;
}

.content .line-right::after {
  content: '';
  width: 3px;
  height: 100%;
  background-color: #bfbfbf;
 position: absolute;
  top: 0;
}

.content:hover .line-left::after, .content:hover .line-right::after {
  height: 0;
  transition: height 2s cubic-bezier(.15,.65,1,.15);
}

<div class="content">
  <div class="line-left"></div>
  <div class="line-right"></div>
</div>

Answer 1

这似乎是一个渲染问题。这是另一种想法，可以毫无问题地使用更少的代码获得相同的效果。我们定义了 4 条渐变线：每边两条，位置相同。在悬停时，我们只是降低灰色的高度，增加蓝色的高度。 top/bottom 将定义动画的方向：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  height: 100vh;
  width: 50vw;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background:
    linear-gradient(#286090,#286090) bottom 0 right 25px,
    linear-gradient(#bfbfbf,#bfbfbf) top    0 right 25px,
    linear-gradient(#286090,#286090) top    0 left  25px,
    linear-gradient(#bfbfbf,#bfbfbf) bottom 0 left  25px;
  background-size:3px 0, 3px 100%;
  background-repeat:no-repeat;
  transition:2s cubic-bezier(.15, .65, 1, .15);
}

.content:hover {
  background-size:3px 100%, 3px 0;

}

<div class="content">
</div>

<div> 的过渡在另一个元素上创建了边框

the transition of a <div> creates a border on an other element

html

css

transition

border