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

我有两个元素：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。

最佳答案

我给你两个解决方案：

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

关于html - 为什么背面的元素的边界半径可见？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36181134/