如何在html页面上绘制圆圈？

你如何使用HTML5和CSS3绘制一个圆圈？

是否也可以把文字放在里面？

你本身不能画一个圆圈。 但是你可以把一些东西做成一个圆圈。

您必须创build一个带圆angular（通过border-radius ）的矩形，该矩形是要制作的圆的宽度/高度的一半 。 

  #circle { width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: red; } 
 <div id="circle"></div>

在HTML 5中是完全可能的。 您的选项是： embedded式SVG和<canvas>标记 。

在embedded式SVG中绘制圆： 

 <svg xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50" fill="red" /> </svg>

有几个你可以使用的unicode圈子： 

 * { font-size: 50px; } 
 &#x25CB; &#x25CC; &#x25CD; &#x25CE; &#x25CF;

border-radius:50%如果你想要圆圈调整到任何尺寸的容器（例如，如果文本是可变长度）

不要忘记-moz-和-webkit-前缀！

截至2015年，您可以使用CSS（ 小提琴 ）最less15行来制作文本。 

 body { background-color: #fff; } #circle { position: relative; background-color: #09f; margin: 20px auto; width: 400px; height: 400px; border-radius: 200px; } #text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>circle with text</title> </head> <body> <div id="circle"> <div id="text">Text in the circle</div> </div> </body> </html>

你可以使用border-radius属性给它一个与元素的边界半径相等的边界半径。 例如： 

 <div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;">&nbsp;</div>

（使用-moz和-webkit扩展的原因是为了支持Gecko和Webkit的CSS3-final版本。）

这个页面上还有更多的例子。 至于插入文本，你可以做到这一点，但你必须留意定位，因为大多数浏览器的盒子填充模型仍然使用外方。

在技​​术上没有一种方法可以用HTML绘制圆（没有<circle> HTML标记），但是可以绘制一个圆。

绘制一个最好的方法是将border-radius: 50%到标签，如div 。 这是一个例子： 

 <div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>

您可以使用border-radius属性，或者使用png圈来创build固定高度和宽度的div以及背景。 

  1.  h1 { border: dashed 2px blue; width: 200px; height: 200px; border-radius: 100px; text-align: center; line-height: 60px; } 
     <h1> <br>hello world</h1> 
 .circle{ height: 65px; width: 65px; border-radius: 50%; border:1px solid red; line-height: 65px; text-align: center; } 
 <div class="circle"><span>text</span></div> 
  <head> <style> #circle{ width:200px; height:200px; border-radius:100px; background-color:red; } </style> </head> <body> <div id="circle"></div> </body>

简单而新手:) 

 .at-counter-box { border: 2px solid #1ac6ff; width: 150px; height: 150px; border-radius: 100px; font-family: 'Oswald Sans', sans-serif; color:#000; } .at-counter-box-content { position: relative; } .at-counter-content span { font-size: 40px; font-weight: bold ; text-align: center; position: relative; top: 55px; }

如果你使用sass写你的CSS，你可以这样做： 

 @mixin draw_circle($radius){ width: $radius*2; height: $radius*2; -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .my-circle { @include draw_circle(25px); background-color: red; }

哪些产出： 

 .my-circle { width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-color: red; }

试试这里： https : //www.sassmeister.com/ 

 <div class="at-counter-box-content"> <div class="at-counter-content"> <span>40%</span> </div><!--at-counter-content--> </div><!--at-counter-box-content-->
Interesting Posts