如何在CSS中创建彩色圆圈

Boopathi Vkl

我在中创建了彩色圆圈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>

我该如何解决这个问题?

五神殿

你已经错过了..bottom-left

你这样写

bottom-left
{

}

但是你必须这样写

.bottom-left
{

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章