blocks|key|820657|text|有几个unicode圆圈可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820658|​|820659|*+{+font-size:+50px;+}|code-block|syntax|javascript|820660|&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;|820661|820662|更多形状here。|offset|length|820663|如果需要，可以在圆圈上叠加文本：|820664|820665|#container+{
++++position:+relative;
}
#circle+{
++font-size:+50px;
++color:+#58f;
}
#text+{
++++z-index:+1;
++++position:+absolute;
++++top:+21px;
++++left:+11px;
}|820666|<div+id="container">
++++<div+id="circle">&#x25CF;</div>
++++<div+id="text">a</div>
</div>|820667|820668|您也可以使用自定义字体(如this+one)，因为并非所有的计算机/浏览器都安装了相同的字体，因此您希望在不同的系统上使用相同的字体。|820669|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Geometric_Shapes|1|http://fontawesome.io/^0|0|0|0|0|0|4|4|0|0|0|0|0|0|0|D|4|1|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1A|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1E|8|@]|9|@$N|1F|O|1G|1|1H]]|A|$]]|$1|P|3|Q|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|C|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|F|7|1L|8|@]|9|@]|A|$G|H]]|$1|W|3|C|5|6|7|1M|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1N|8|@]|9|@$N|1O|O|1P|1|1Q]]|A|$]]|$1|Z|3|-4|5|6|7|1R|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]|17|$5|12|13|14|A|$15|18]]]]

<p>There are a few unicode circles you could use:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* { font-size: 50px; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&amp;#x25CB;
&amp;#x25CC;
&amp;#x25CD;
&amp;#x25CE;
&amp;#x25CF;</code></pre>
</div>
</div>
</p>

<p>More shapes <a href="http://en.wikipedia.org/wiki/Geometric_Shapes" rel="noreferrer">here</a>.</p>

<p>You can overlay text on the circles if you want to:</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
    position: relative;
}
#circle {
  font-size: 50px;
  color: #58f;
}
#text {
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="circle"&gt;&amp;#x25CF;&lt;/div&gt;
    &lt;div id="text"&gt;a&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>You could also use a custom font (like <a href="http://fontawesome.io" rel="noreferrer">this</a> one) if you want to have a higher chance of it looking the same on different systems since not all computers/browsers have the same fonts installed.</p>


blocks|key|820697|text|到了2015年，你只需要15行CSS+(Fiddle)就可以让文本居中显示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|820698|​|820699|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%25;
++left:+50%25;
++transform:+translate(-50%25,+-50%25);
++color:+#fff;
}|code-block|syntax|javascript|820700|<!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>|820701|820702|如果没有任何-webkit-s，它可以在IE11、火狐、Chrome和Opera上运行，并且它是有效的HTML5+(实验性)和CSS3。|style|CODE|820703|MS+Edge+(2020)也是如此。|820704|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/81uuLmhy/^0|K|6|0|0|0|0|0|0|6|8|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|16|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|18|8|@]|9|@]|C|$]]|$1|N|3|O|5|6|7|19|8|@$A|1A|B|1B|P|Q]]|9|@]|C|$]]|$1|R|3|S|5|6|7|1C|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

<p>As of 2015, you can make it and center the text with as few as 15 lines of CSS (<a href="https://jsfiddle.net/81uuLmhy/" rel="nofollow noreferrer">Fiddle</a>):</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;circle with text&lt;/title&gt;

&lt;/head&gt;

&lt;body&gt;
  &lt;div id="circle"&gt;
    &lt;div id="text"&gt;Text in the circle&lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Without any <code>-webkit-</code>s, this works on IE11, Firefox, Chrome and Opera, and it is valid HTML5 (experimental) and CSS3.</p>

<p>Same on MS Edge (2020).</p>


blocks|key|605606|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|605607|.circle{
++++height:+65px;
++++width:+65px;
++++border-radius:+50%25;
++++border:1px+solid+red;
++++line-height:+65px;
++++text-align:+center;
}|code-block|syntax|javascript|605608|<div+class="circle"><span>text</span></div>|605609|605610|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.circle{
    height: 65px;
    width: 65px;
    border-radius: 50%;
    border:1px solid red;
    line-height: 65px;
    text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="circle"&gt;&lt;span&gt;text&lt;/span&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|820516|text|您可以使用border-radius属性为它提供一个与元素的边界半径相等的边界半径。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820517|<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>|code-block|syntax|javascript|820518|(使用-moz和-webkit扩展的原因是为了支持Gecko和Webkit的预CSS3最终版本。)|820519|在this+page上有更多的例子。至于插入文本，您可以这样做，但您必须注意位置，因为大多数浏览器的框填充模型仍然使用外部方框。|offset|length|820520|entityMap|0|LINK|mutability|MUTABLE|url|http://www.cardeo.ca/2010/how-to-create-circles-with-css3-and-no-images^0|0|0|0|1|9|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>You can use the border-radius attribute to give it a border-radius equivalent to the element's border-radius.  For example:</p>

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

<p>(The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit.)</p>

<p>There are more examples on <a href="http://www.cardeo.ca/2010/how-to-create-circles-with-css3-and-no-images" rel="nofollow">this page</a>.  As far as inserting text, you can do it but you have to be mindful of the positioning, as most browsers' box padding model still uses the outer square.</p>


blocks|key|605423|text|从技术上讲，没有一种方法可以用<circle>绘制圆(没有HTML标记)，但是可以画圆。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|605424|绘制的最好方法是将border-radius:+50%25添加到div等标记中。下面是一个例子：|605425|<div+style="width:+50px;+height:+50px;+border-radius:+50%25;">You+can+put+text+in+here.....</div>|code-block|syntax|javascript|605426|entityMap^0|F|8|0|9|I|U|3|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>There is not technically a way to draw a circle with HTML (there isn’t a <code>&lt;circle&gt;</code> HTML tag), but a circle can be drawn.</p>

<p>The best way to draw one is to add <code>border-radius: 50%</code> to a tag such as <code>div</code>. Here’s an example:</p>

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


blocks|key|820567|text|您可以使用边框半径属性，或使用png圆制作具有固定高度和宽度的div和背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820568|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>You can use border-radius property, or make a div with fixed height and width and a background with png circle.</p>


blocks|key|605685|text|只需在脚本标记中执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|605686|​|605687|<!Doctype+html>
<html>
<head>
	<title>Circle+Canvas</title>
</head>
<body>
	<canvas+id="myCanvas"+width="300"+height="150"+style="border:1px+solid+
#d3d3d3;">
	<body>
		<script>
			var+c+=+document.getElementById("myCanvas");
			var+ctx+=+c.getContext("2d");
			ctx.beginPath();
			ctx.arc(100,+75,+50,+0,+2+*+Math.PI);
			ctx.stroke();
		</script>
++++</body>
</body>
</html>|code-block|syntax|javascript|605688|605689|就这样，你得到了你的圆圈。|605690|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Simply do the following in the script tags:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!Doctype html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Circle Canvas&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;canvas id="myCanvas" width="300" height="150" style="border:1px solid 
#d3d3d3;"&gt;
	&lt;body&gt;
		&lt;script&gt;
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			ctx.arc(100, 75, 50, 0, 2 * Math.PI);
			ctx.stroke();
		&lt;/script&gt;
    &lt;/body&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>And there you go you got your circle.</p>


blocks|key|605574|text|.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;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|605575|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>.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;
}
</code></pre>


blocks|key|820773|text|+++<head>
+++++++<style>

+++++++#circle{
+++++++width:200px;
+++++++height:200px;
+++++++border-radius:100px;
+++++++background-color:red;
+++++++}
+++++++</style>
+++</head>

++++<body>
+++++++<div+id="circle"></div>
+++</body>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|820774|简单且新手:)|unstyled|820775|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>   &lt;head&gt;
       &lt;style&gt;

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       &lt;/style&gt;
   &lt;/head&gt;

    &lt;body&gt;
       &lt;div id="circle"&gt;&lt;/div&gt;
   &lt;/body&gt;
</code></pre>

<p>simple and novice :)</p>


blocks|key|820936|text|这是我在CS1.6统计网站上使用的一个圆圈。一个漂亮的四色圆。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820937|​|820938|#circle+{
++++++border-top:+8px+ridge+#d11967;
++++++border-right:+8px+ridge+#d32997;
++++++border-bottom:+8px+ridge+#5246eb;
++++++border-left:+8px+ridge+#fc2938;
++++++border-radius:+50%25;+width:+440px;+height:+440px;
}|code-block|syntax|javascript|820939|<div+id="circle"></div>|820940|通过更改宽度和高度来调整圆直径。|820941|820942|还可以使用skewY()、skewX()和rotate+()进行旋转和倾斜：|820943|++transform:+rotate(60deg);
++transform:+skewY(-5deg);
++transform:+skewX(-15deg);|820944|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|6|7|X|8|@]|9|@]|A|$]]|$1|M|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|Z|8|@]|9|@]|A|$]]|$1|P|3|Q|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|R|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|S|$]]

<p>Here's a circle that I used for a CS 1.6 stats website.
A beautiful four colors circle.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#circle {
      border-top: 8px ridge #d11967;
      border-right: 8px ridge #d32997;
      border-bottom: 8px ridge #5246eb;
      border-left: 8px ridge #fc2938;
      border-radius: 50%; width: 440px; height: 440px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="circle"&gt;&lt;/div&gt;</code></pre>
</div>
</div>

Adjust the circle diameter by chaging the width and height.</p>
<p>You can also rotate and skew by using skewY(), skewX() and rotate():</p>
<pre><code>  transform: rotate(60deg);
  transform: skewY(-5deg);
  transform: skewX(-15deg);
</code></pre>


blocks|key|605567|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|605568|<div+class="at-counter-box-content">

++<div+class="at-counter-content">

++++++<span>40%25</span>

++</div>

</div>|code-block|syntax|javascript|605569|605570|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p></p>

<pre><code>&lt;div class="at-counter-box-content"&gt;

  &lt;div class="at-counter-content"&gt;

      &lt;span&gt;40%&lt;/span&gt;

  &lt;/div&gt;&lt;!--at-counter-content--&gt;

&lt;/div&gt;&lt;!--at-counter-box-content--&gt;
</code></pre>

<p></p>


blocks|key|820815|text|如果你使用sass编写你的CSS，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|820816|@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;
}|code-block|syntax|javascript|820817|以下哪项输出：|820818|.my-circle+{
++width:+50px;
++height:+50px;
++-webkit-border-radius:+25px;
++-moz-border-radius:+25px;
++border-radius:+25px;
++background-color:+red;
}|820819|在这里试试：https://www.sassmeister.com/|offset|length|820820|entityMap|0|LINK|mutability|MUTABLE|url|https://www.sassmeister.com/^0|0|0|0|0|6|S|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>If you're using sass to write your CSS you can do:</p>

<pre><code>@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;
}
</code></pre>

<p>Which outputs:</p>

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

<p>Try it here: <a href="https://www.sassmeister.com/" rel="nofollow noreferrer">https://www.sassmeister.com/</a></p>


<p>How do you draw a circle using HTML5 and CSS3? </p>

<p>Is it also possible to put text inside?</p>


How to draw circle in html page?

HTML5

如何使用HTML5和CSS3绘制圆？是否也可以将文本放入其中？

问如何在html页面中画圆？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html页面中画圆？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html页面中画圆？
EN