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


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


<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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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