Html 单独使用css绘制圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6936972/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw Circle using css alone
提问by Hector Barbossa
Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?
是否可以仅使用适用于大多数浏览器（IE、Mozilla、Safari）的 css 绘制圆圈？
回答by Tatu Ulmanen
Yep, draw a box and give it a border radius that is half the width of the box:
是的，画一个盒子并给它一个边框半径，它是盒子宽度的一半：
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
Working demo:
工作演示：
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}<div id="circle"></div>回答by Tom
You could use a .before with a content with a unicode symbol for a circle (25CF).
您可以将 .before 与带有 unicode 符号的内容一起用于圆圈 (25CF)。
.circle:before {
content: ' CF';
font-size: 200px;
}<span class="circle"></span>I suggest this as border-radius won't work in IE8 and below (I recognize the fact that the suggestion is a bit mental).
我建议这样做，因为 border-radius 在 IE8 及以下版本中不起作用（我认识到这个建议有点精神）。
回答by jbutler483
- Create a div with a set height and width (so, for a circle, use the same height and width), forming a square
- add a
border-radiusof 50%which will make it circular in shape. (note: no prefix has been required for a long time) - You can then play around with
background-color/ gradients / (evenpseudo elements) to create something like this:
- 创建一个具有设置高度和宽度的 div（因此，对于圆形，使用相同的高度和宽度），形成一个正方形
- 加
border-radius的50％ ，这将使它的形状为圆形。（注：很久没有前缀了） - 然后你可以使用
background-color/ gradients / (evenpseudo 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>回答by Sunit
border radius is good option, if struggling with old IE versions then try HTML codes
边界半径是不错的选择，如果在旧 IE 版本中挣扎，请尝试 HTML 代码
•
and use css to change color. Output:
并使用 css 更改颜色。输出：
•
•
回答by AeJey
This will work in all browsers
这将适用于所有浏览器
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
回答by AeJey
yup.. here's my code:
是的..这是我的代码：
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>
回答by shankhan
yes it is possible you can use border-radius CSS property. For more info have a look at http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity
是的，您可以使用 border-radius CSS 属性。有关更多信息，请查看http://zeeshanmkhan.com/post/2/css-rounded-corner-gradient-drop-shadow-and-opacity
