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

Answer 2

您错过了.班级中的.bottom-left

你这样写

bottom-left
{

}

但你必须这样写

.bottom-left
{

}

Answer 3

你在.班级选择器

之后给出了线刹

}.
bottom-left
{

这就是你的选择器失效的原因。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

    .bottom-left {
  background: #782;
  border-bottom-left-radius: 50px;
  float: left;
  }

你错过了。在.bottom-left class

Answer 5

这是一个非常有趣的问题。我想过用纯CSS制作这个圆圈的动画。

这是一个在

上激活旋转激活的解决方案：

#circle-container
{
  width:100px;
  height:100px;
 }
#circle-container:hover {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation:    spin 2s infinite linear;
  -o-animation:      spin 2s infinite linear;
  animation:         spin 1s infinite linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg) ;
  }
  to {
    transform: rotate(360deg);
  }
}
.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>

还有一个片段在鼠标输入时旋转一圈，在鼠标移出时旋转回来

#circle-container
{
  width:100px;
  height:100px;
  transition: transform 1s;
 }
#circle-container:hover {
  transform: rotate(360deg);
}
.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>

答案 5 :(得分：0)

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

使用此css。

Answer 6

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

使用此css。

如何在CSS中创建多彩圆圈

6 个答案: