Html 如何在html页面中绘制圆圈？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6921792/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to draw circle in html page?
提问by Sergey Metlov
How do you draw a circle using HTML5 and CSS3?
如何使用 HTML5 和 CSS3 绘制圆？
Is it also possible to put text inside?
是否也可以将文本放入其中？
回答by ryanoshea
You can't draw a circle per se. But you can make something identical to a circle.
你不能画一个圆圈本身。但是您可以制作与圆圈相同的东西。
You'd have to create a rectangle with rounded corners (via border-radius) that are one-half the width/heightof the circle you want to make.
您必须创建一个带有圆角（via border-radius）的矩形，该矩形是您想要制作的圆的宽度/高度的一半。
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>回答by jkj
It is quite possible in HTML 5. Your options are: Embedded SVGand <canvas>tag.
这在HTML 5 中很有可能。您的选择是：嵌入式 SVG和<canvas>tag。
To draw circle in embedded SVG:
要在嵌入式 SVG 中绘制圆：
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Circle in <canvas>:
圈在<canvas>：
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()<canvas id="circlecanvas" width="100" height="100"></canvas>回答by Alex
There are a few unicode circles you could use:
您可以使用一些 unicode 圆圈：
* { font-size: 50px; }○
◌
◍
◎
●More shapes here.
更多形状在这里。
You can overlay text on the circles if you want to:
如果需要，您可以在圆圈上叠加文本：
#container {
position: relative;
}
#circle {
font-size: 50px;
color: #58f;
}
#text {
z-index: 1;
position: absolute;
top: 21px;
left: 11px;
}<div id="container">
<div id="circle">●</div>
<div id="text">a</div>
</div>You could also use a custom font (like thisone) 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.
如果您希望它在不同系统上看起来相同的可能性更高，您也可以使用自定义字体（如这个），因为并非所有计算机/浏览器都安装了相同的字体。
回答by Lea Verou
border-radius:50%if you want the circle to adjust to whatever dimensions the container gets (e.g. if the text is variable length)
border-radius:50%如果您希望圆圈调整到容器获得的任何尺寸（例如，如果文本长度可变）
Don't forget the -moz-and -webkit-prefixes!
不要忘记-moz-和-webkit-前缀！
回答by MattAllegro
As of 2015, you can make it and center the text with as few as 15 lines of CSS (Fiddle):
截至 2015 年，您可以使用少至 15 行的 CSS ( Fiddle)制作并居中文本：
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>Without any -webkit-s, this works on IE11, Firefox, Chrome and Opera, and it is valid HTML5 (experimental) and CSS3.
没有任何-webkit-s，这适用于 IE11、Firefox、Chrome 和 Opera，并且它是有效的 HTML5（实验性）和 CSS3。
Same on MS Edge (2020).
在 MS Edge (2020) 上也是如此。
回答by Sunny
.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>回答by Peter Prakker
border-radius: 50%;will turn all elements into a circle, regardless of size. At least, as long as theheightandwidthof the target are the same, otherwise it will turn into an oval.
border-radius: 50%;将所有元素变成一个圆圈，无论大小。至少，只要height和width目标都是一样的，否则它会变成一个椭圆形。
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Note: browser prefixes are notneeded anymore for border-radius
Alternatively, you can use clip-path: circle();to turn an element into a circle as well. Even if the element has a greater widththan height(or the other way around), it will still become a circle, and notan oval.
或者，您也可以使用clip-path: circle();将元素变成圆形。即使该元素具有较大的width比height（或者反过来），它仍然会成为一个圆圈，而不是一个椭圆形。
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Note: clip-path is not(yet) supported by all browsers
You can place text inside of the circle, simply by writing the text inside of the tags of the target,
like so:
您可以将文本放置在圆圈内，只需将文本写入目标标签内，
如下所示：
<div>text</div>
If you want to centertext in the circle, you can do the following:
如果要使圆圈中的文本居中，可以执行以下操作：
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}<div id="target">
<div id="text">text</div>
</div>回答by lachlanjc
There is not technically a way to draw a circle with HTML (there isn't a <circle>HTML tag), but a circle can be drawn.
技术上没有办法用 HTML 画圆（没有<circle>HTML 标签），但可以画圆。
The best way to draw one is to add border-radius: 50%to a tag such as div. Here's an example:
绘制一个的最好方法是添加border-radius: 50%到诸如div. 下面是一个例子：
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
回答by fluffy
You can use the border-radius attribute to give it a border-radius equivalent to the element's border-radius. For example:
您可以使用 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;"> </div>
(The reason for using the -moz and -webkit extensions is to support pre-CSS3-final versions of Gecko and Webkit.)
（使用 -moz 和 -webkit 扩展的原因是为了支持 Gecko 和 Webkit 的 CSS3-final 之前的版本。）
There are more examples on this page. 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.
此页面上有更多示例。至于插入文本，您可以这样做，但您必须注意定位，因为大多数浏览器的框填充模型仍然使用外部方块。
回答by Bardt
You can use border-radius property, or make a div with fixed height and width and a background with png circle.
您可以使用 border-radius 属性，或者制作一个具有固定高度和宽度的 div 以及带有 png 圆圈的背景。
