用css单独绘制圆圈

是否可以使用只能在大多数浏览器（IE浏览器，Mozilla，Safari）工作的CSS绘制圆？

Answer 1

您可以使用一个.before与一个unicode符号为一个圆圈（25CF）的内容。

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

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

Answer 2

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

 #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 3

• 创build一个具有设置高度和宽度的div（所以，对于一个圆，使用相同的高度和宽度），形成一个正方形
• 添加一个50％的border-radius ，这将使其成为圆形。 （注意： 长时间不需要前缀）
• 然后你可以玩background-color /渐变/（甚至pseudo elements ）来创build类似这样的东西：

 .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> 

Answer 4

这将在所有浏览器中工作

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

Answer 5

烨..这是我的代码：

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

Answer 6

边框半径是很好的select，如果与旧的IE版本挣扎，然后尝试HTML代码

 • 

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

•

Answer 7

是的，你可以使用border-radius CSS属性。 欲了解更多信息，请访问http://zeeshanmkhan.com/post/2/css-round-corner-gradient-drop-shadow-and-opacity