html - 为什么背景不适用于 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 默认是 inline 元素，尝试将它们的 display 值更改为 inline-block，或 block 如下:

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

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

注意:我还整理了您不正确的 CSS 标记(您试图声明一个不正确的属性 border-solid:)