背景色超过背景色

Question

我想为元素提供具有边框半径的背景色，并提供其他背景色以显示边框半径在哪里删除了第一个边框。

谁知道呢？

伪代码：

{{1}}

Answer 1

您可以使用::before选择器添加覆盖图以达到要求，请检查以下示例！

.special {
  border-radius: 50%;
  background-color: red;
  width: 100px;
  height: 100px;
}

.special::before {
  content: '';
  position: absolute;
  width: inherit;
  height: inherit;
  background-color: yellow;
  z-index: -1;
}

<div class="special"></div>

Answer 2

使用径向渐变：

.box {
  background: 
    radial-gradient(farthest-side,yellow 98%,transparent 100%),
    red;
  width:100px;
  height:100px;
}

<div class="box"></div>

每个角的颜色也可以不同：

.box {
  background: 
    radial-gradient(farthest-side,yellow 98%,transparent 100%),
    linear-gradient(red,red)       top left    /51% 51%,
    linear-gradient(blue,blue)     top right   /51% 51%,
    linear-gradient(green,green)   bottom left /51% 51%,
    linear-gradient(purple,purple) bottom right/51% 51%;
  background-repeat:no-repeat;
  width:100px;
  height:100px;
}

<div class="box"></div>