为什么背面元素的边界半径可见？

Question

我有两个元素：article（位于后面）和header位于前面：

article[_v-e514def2] {      
    background-color: #fff;
    border-bottom: 2px solid #2a2721;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 400px;
    height: 400px;
    border-radius: 3px;
}
    
article header[_v-e514def2] {
    background-color: #484a47;
    padding: 5px 0;
    border-radius: 3px 3px 0 0;
}

<article _v-e514def2="">
    <header _v-e514def2="">
        <h3 _v-e514def2="">Hardcoded Title</h3>
    </header>
    <section _v-e514def2="">
        <p>...</p>
    </section>
</article>

如您所见，它们具有相同的边界半径。但是，您可以在背面看到元素的边框：

这是正常的吗？如果是这样，最简单的解决方法是什么？

这是JSFiddle。

Answer 1

我给你两个解决方案：

DEMO 1

点击margin-top: -1px;：

CSS

article header[_v-e514def2] {
  background-color: #484a47;
  padding: 5px 0;  
  border-radius: 3px 3px 0 0;
  margin-top: -1px;
}

DEMO 2

增加border-radius: 5px 3px;：

CSS

article[_v-e514def2] {
   background-color: #fff;
   border-bottom: 2px solid #2a2721;
   position: absolute;
   top: 10px;
   left: 10px;
   width: 400px;
   height: 400px;
   border-radius: 5px 3px;  
}