html - 如何在CSS中创建彩色圆圈

Question

我在 css 中创建了彩色圆圈。我的问题是左下角的圆圈不起作用。

即使我给 .bottom-left 一些颜色，它也没有显示。

#circle-container
{
  width:100px;
  height:100px
}
.quarter
{
  width:50px;
  height:50px
}
.top-left
{
 border-top-left-radius:50px;
 background:#09f;
  float:left;
}
.top-right
{
  border-top-right-radius:50px;
  background:#666;
  float:right;
}.
bottom-left
{
  border-bottom-left-radius:50px;
  background:#782;
  float:left;
}
.bottom-right
{
  border-bottom-right-radius:50px;
  background:#333;
  float:right;
}

<div id="circle-container">
<div class="quarter top-left"></div>
<div class="quarter top-right"></div>
<div class="quarter bottom-left"></div>
<div class="quarter bottom-right"></div>
</div>

我该如何解决这个问题？

Answer 1

你错过了 . 在 .bottom-left 类中

你这样写

bottom-left
{

}

但是你必须这样写

.bottom-left
{

}