更改特定元素 border-radius 下的背景颜色

Question

我要在我的部分底部添加一个边框半径。我的 body 的背景颜色是黑色。我试图让每个 border-radius 下的颜色与下一节的 background-color 相匹配。不是body的背景色。不知道如何在 google 上找到问题，如果问题已经被问到，请提前致歉。

Border Radius Problem

Answer 1

嘿抱歉，如果不看编码很难说出任何内容。请至少共享解决方案的代码。谢谢

Answer 2

您可以使用前 pseudo-element 和 z-index -1 来执行此操作，这有点棘手：

section {
  border-radius: 0 0 40px 40px;
  height: 200px;
  position: relative;
  width: 100vw;
}

section:after {
  content: "";
  position: absolute;
  top: -40px; /* border radius size * -1 */
  left: 0;
  height: 40px; /* border radius size */
  width: 100vw;
  z-index: -1;
}

section:nth-child(odd) {
  background-color: magenta;
}

section:nth-child(even) {
  background-color: cyan;
}

section:nth-child(odd):after {
  background-color: magenta;
}

section:nth-child(even):after {
  background-color: cyan;
}

实例：https://codesandbox.io/s/quizzical-river-iwxz4c?file=/src/styles.css

Answer 3

与我们分享您尝试过的内容（原始代码），以便我们更清楚地了解问题并告诉您解决问题的方法。

更改特定元素 border-radius 下的背景颜色

Change background color under border-radius of specific element

html

css

user-experience