为什么背景不适用于span标签？

Question

我正在尝试使用CSS创建四个象限。

.top-left {
  background: red;
  height: 100px;
  border-top-left-radius: 100%;
  width: 100px;
}
.top-right {
  background: green;
  border-top-right-radius: 100%;
  height: 100px;
  width: 100px;
}
.bottom-left {
  background: blue;
  border-bottom-left-radius: 100%;
  height: 100px;
  width: 100px;
}
.bottom-right {
  background: yellow;
  border-bottom-right-radius: 100%;
  height: 100px;
  width: 100px;
}

<div id="outerCircle">
  <div id="top">
    <span id="red" class="top-left"></span>
    <span id="green" class="top-right"></span>
  </div>
  <div id="bottom">
    <span id="blue" class="bottom-left"></span>
    <span id="yellow" class="bottom-right"></span>
  </div>
</div>

但除非我在span标签中输入内容，否则不显示任何内容。如何在没有任何文字的情况下显示背景？

Answer 1

<span>是内嵌级元素，默认情况下width和height不适用，您可以将其设置为display:inline-block或display:block让它发挥作用。

#outerCircle {
  font-size: 0; /*remove whitespace*/
}

#outerCircle span {
  font-size: 16px; /*reset font-size*/
  display: inline-block;
}

.top-left {
  background: red;
  height: 100px;
  border-top-left-radius: 100%;
  width: 100px;
}

.top-right {
  background: green;
  border-top-right-radius: 100%;
  height: 100px;
  width: 100px;
}

.bottom-left {
  background: blue;
  border-bottom-left-radius: 100%;
  height: 100px;
  width: 100px;
}

.bottom-right {
  background: yellow;
  border-bottom-right-radius: 100%;
  height: 100px;
  width: 100px;
}

<div id="outerCircle">
  <div id="top">
    <span id="red" class="top-left"></span>
    <span id="green" class="top-right"></span>
  </div>
  <div id="bottom">
    <span id="blue" class="bottom-left"></span>
    <span id="yellow" class="bottom-right"></span>
  </div>
</div>

Answer 2

span默认为inline个元素，尝试将display值更改为inline-block或block，如下所示：

＆＃13;

＆＃13;

.top-right, .top-left, .bottom-right, .bottom-left {
  display: inline-block;
}
.top-left{

  background:red;
  height:100px;
  border: solid 2px black;
  border-top-left-radius:100%;
  width:100px;
}



.top-right{
  background:green;
  border: solid 2px black;
  border-top-right-radius:100%;
  height:100px;
  width:100px;
}

.bottom-left{
  background:blue;
  border: solid 2px black;
  border-bottom-left-radius:100%;
  height:100px;
width:100px;
}

.bottom-right{
  background:yellow;
  border: solid 2px black;
  border-bottom-right-radius:100%;
  height:100px;
  width:100px;
}

＆＃13;

<div id="outerCircle">
  <div id="top">
    <span id="red" class="top-left"></span>
    <span id="green" class="top-right"></span>
  </div>
  <div id="bottom">
    <span id="blue" class="bottom-left"></span>
    <span id="yellow" class="bottom-right"></span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意：我还整理了你不正确的CSS标记（你试图声明一个不正确的属性border-solid:）