如何在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