两个重叠的 div 上的 CSS 圆形边框出现故障

Question

我目前遇到了CSS中的一个小故障，当有两个重叠的圆形边框时，在第二个div之后，它出现在另一个div的前面并将其自身定位在那里，后面的元素仍然有一个小的像素圆形边框，有人知道如何解决这个问题吗？

div.testCard {
    overflow: hidden;
    position: relative;
    height: 250px;
    width: 250px;
    border-radius: 8px;
    background: #00f;
    text-decoration: none;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

div.info {
    background-color: #fff;
    width: auto;
    height: 100%;
    position: relative;
    padding: 24px 16px;
    background: #f3f3f3;
    border-radius: 8px;
    transition: .4s cubic-bezier(.17,.67,.5,1.03) .15s;
    transform: translateY(300px);
}

div:hover .info {
    transform: translateY(-80px);
}

<div class="testCard">
    <div class="title">
        <h4>
            Test
        </h4>
        <h5>
            
        </h5>
    </div>
    <div class="footer"></div>
    <div class="info">
        <h4>
            Test
        </h4>
        <p class="description">
            Some description as test
        </p>
        <div class="footer">
            <a class="moreInformation" href="" target="_blank" rel="noopener noreferrer"></a>
        </div>
    </div>
</div>

Answer 1

使用

mask

代替

overflow: hidden

可获得更好的结果

div.testCard {
  height: 250px;
  aspect-ratio: 1;
  border-radius: 10px;
  mask: linear-gradient(#000 0 0);
  background: #00f;
  transition: all .2s ease;
}

div.info {
  background-color: #fff;
  height: 100%;
  padding: 24px 16px;
  background: #f3f3f3;
  transition: .4s cubic-bezier(.17, .67, .5, 1.03) .15s;
  transform: translateY(300px);
}

div:hover .info {
  transform: translateY(-80px);
}

<div class="testCard">
  <div class="title">
    <h4>
      Test
    </h4>
    <h5>

    </h5>
  </div>
  <div class="footer"></div>
  <div class="info">
    <h4>
      Test
    </h4>
    <p class="description">
      Some description as test
    </p>
    <div class="footer">
      <a class="moreInformation" href="" target="_blank" rel="noopener noreferrer"></a>
    </div>
  </div>
</div>