创建圆形 div 比使用图像更简单的方法？

Question

我想知道是否有比我现在正在做的更简单的方法来创建圆形 div。

目前，我只是为每个不同的尺寸制作图像，但这样做很烦人。

无论如何使用CSS制作圆形的div并且我可以指定半径？

原文由 bmaster 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个演示：http: //jsfiddle.net/thirtydot/JJytE/1170/

CSS：

 .circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

 <div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

要使其在 IE8 和更早版本 中工作，您必须下载并使用 CSS3 PIE 。我上面的演示在 IE8 中不起作用，但这只是因为 jsFiddle 不托管 PIE.htc 。

我的演示看起来像这样：

原文由 thirtydot 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

将元素每一侧的边界半径设置为 50% 将创建任意大小的圆形显示：

 .circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  /* width and height can be anything, as long as they're equal */
}

原文由 Tamik Soziev 发布，翻译遵循 CC BY-SA 3.0 许可协议