Question

是否可以使用css绘制圆圈，这可以在大多数浏览器（IE，Mozilla，Safari）上使用？

Answer 1

是的，画一个方框并给它一个边框半径，该半径是方框宽度的一半：

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

工作演示：

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

<div id="circle"></div>

Answer 2

您可以将.before与带有unicode符号的内容用于圆圈（25CF）。

.circle:before {
  content: ' \25CF';
  font-size: 200px;
}

<span class="circle"></span>

我建议这样做，因为border-radius在IE8及以下版本中不起作用（我认识到这个建议有点精神）。

Answer 3

创建一个具有设定高度和宽度的div（因此，对于圆圈，使用相同的高度和宽度），形成正方形
添加border-radius 50％，这将使其形状呈圆形。 （注意：long time）
然后你可以使用background-color / gradients /（甚至pseudo elements）来创建这样的内容：

＆＃13;

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}

＆＃13;

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

＆＃13;

Answer 4

border radius是不错的选择，如果与旧的IE版本挣扎，那么尝试使用HTML代码

&#8226;

并使用css来改变颜色。输出：

•

Answer 5

这适用于所有浏览器

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

Answer 6

是..这是我的代码：

<style>
  .circle{
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: blue
  }
</style>
<div class="circle">
</div>

Answer 7

是的，你可以使用border-radius CSS属性。有关详细信息，请查看http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity

仅使用css绘制圆形

7 个答案: