是否可以仅使用CSS来绘制圆圈，并在大多数浏览器（IE，Mozilla，Safari）上实现？
仅使用CSS绘制圆形
146
- Hector Barbossa
2
6这个问题已经被问了很多次。 - OverZealous
1这个内容包含在如何使用CSS将内容围绕成圆形？中。 - Martin Thoma
6个回答
243
画一个框，并给它一个边框半径，其大小为框的一半：
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
演示效果:
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}<div id="circle"></div>- Tatu Ulmanen
6
6我正在使用IE8，但这个演示无法运行。它只显示一个红色的正方形。 - adam
3IE8不支持border-radius，所以这很有道理...不过对于现代浏览器来说是个好主意，非常酷... - jcreamer898
39请问您是否能够在支持IE8方面向您的客户提供一条信息，告知用户升级浏览器会更加有益。这将使每个人受益，而微软也推荐此举。甚至在2012年底，谷歌都已停止对其网络应用程序（Gmail、日历、Drive、文档等）提供IE8支持。支持一个五年前的浏览器是荒谬的。 - Gavin
2使用IE8的Polyfill：http://css3pie.com/，并使用border-radius:100％;来实现响应式圆形，使用padding-bottom:40％; width:40％; height:0; overflow:visible; - fearis
2如果圆圈非常小，这种方法效果不佳。 - Atav32
现在有一种更简单的方法，可以使用aspect-ratio属性：.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
} - Felix Haeberle
177
你可以使用 .before 方法结合一个带有圆形 unicode 符号 (25CF) 的内容来实现。
.circle:before {
content: ' \25CF';
font-size: 200px;
}<span class="circle"></span>在IE8及以下版本中，border-radius不起作用，因此我建议使用此方法（我知道这个建议有点疯狂）。
- Tom
4
4
:before在IE7及更早版本中无效，因此这种方法仅在IE8上获得支持，但使得正确定位圆形非常困难。例如，200px的字体大小并不等同于直径为200px的圆，某些系统上会失去抗锯齿效果。 - Tatu Ulmanen也许我们可以设置
margin: -0.5em -0.3em -0.3em -0.1em。 - Pierre de LESPINAY1考虑到IE 8已经接近10年的历史，这个回答不再适用。根据https://caniuse.com/usage-table的数据，IE 8目前仅占0.18%的使用份额，大多数现代网站已经停止支持它。border-radius属性现在几乎被所有浏览器支持（https://caniuse.com/#search=border-radius），因此应该成为首选答案。 - bjg222
有没有办法讨好SEO神，即使我使用一个圆形文本的图像，而不是旋转每个字母？ - oldboy
52
- 创建一个具有固定高度和宽度的div（例如，对于一个圆形，请使用相同的高度和宽度），形成一个正方形
- 添加50％的
border-radius属性可以使其呈圆形。 （注意：很长一段时间以来，不需要为前缀） - 然后可以通过使用
background-color/渐变/（甚至是pseudo elements）进行调整，以创建像这样的效果：
.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);
}<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>- jbutler483
6
3相当惊艳的渐变效果 - Atav32
1@Atav32：谢谢！实际上是使用多个盒子阴影完成的 :) - jbutler483
我从这个简单的例子中学到了很多。非常感谢您。 - degenerate
1谢谢@degenerate！希望你在CSS之旅中一切顺利 :) - jbutler483
1我本来想发一条愤怒的回复，说这和Tatu的答案一样，但是我点击了“运行代码”.... #micdrop - NickG
1感谢 @NickG，我很感激 :) - jbutler483
15
如果遇到旧版IE的困扰，可以尝试使用HTML代码，而边框半径则是一个不错的选择。
•
使用CSS更改颜色。输出：
•
- Sunit
11
这将在所有浏览器中正常工作
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
- AeJey
9
是的.. 这是我的代码:
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>
- user1999828
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接