如何在html页面中画圆圈？答案

【问题标题】：How to draw circle in html page?如何在html页面中画圆圈？
【发布时间】：2021-02-10 12:55:30
【问题描述】：

如何使用 HTML5 和 CSS3 绘制圆？

里面也可以放文字吗？

【问题讨论】：

只是一个圈子：stackoverflow.com/questions/4840736/…。带文字的圆圈：stackoverflow.com/questions/4861224/….

标签： html css geometry css-shapes

【解决方案1】：

你不能画一个圆本身。但你可以制作与圆形相同的东西。

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

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

&lt;div id="circle"&gt;&lt;/div&gt;

【讨论】：

再想一想，你可能想贴一个在那个
中以确保它被显示。否则，浏览器可能会忽略它。
我认为这个答案是错误的，因为它说你不能在 HTML5 中画一个圆圈。 Canvas 是一个 HTML5 元素，你可以在 HTML5 中画一个圆圈 (w3schools.com/html/html5_canvas.asp)
使用-webkit-border-radius: 100%; -moz-边界半径：100%；边界半径：100%；这样，您只需要自定义宽度和高度即可在将来应用您的更改
您必须添加边框才能使其可见。
我发现使用border-radius: 50%; 效果很好，可以根据需要更改大小。对于颜色，您可以使用background-color 或border。

【解决方案2】：

这在 HTML 5 中是完全可能的。您的选择是：Embedded SVG 和 <canvas> tag。

在嵌入式 SVG 中画圆：

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

圈在<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()

&lt;canvas id="circlecanvas" width="100" height="100"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案3】：

您可以使用一些 unicode 圆圈：

* { font-size: 50px; }

&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

更多形状here.

如果您愿意，可以在圆圈上叠加文字：

#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">&#x25CF;</div>
    <div id="text">a</div>
</div>

如果您希望它在不同系统上看起来相同的可能性更高，您也可以使用自定义字体（如this），因为并非所有计算机/浏览器都安装了相同的字体。

【讨论】：

【解决方案4】：

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

~~不要忘记 -moz- 和 -webkit- 前缀！~~（前缀不再需要）

div{
  border-radius: 50%;
  display: inline-block;
  background: lightgreen;
}

.a{
  padding: 50px;
}

.b{
  width: 100px;
  height: 100px;
}

<div class='a'></div>
<div class='b'></div>

【讨论】：

您必须确保宽度和高度相等，否则会创建一个椭圆形。

【解决方案5】：

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

没有任何-webkit-s，它适用于 IE11、Firefox、Chrome 和 Opera，并且是有效的 HTML5（实验性）和 CSS3。

在 MS Edge (2020) 上也是如此。

【讨论】：

【解决方案6】：

.circle{
    height: 65px;
    width: 65px;
    border-radius: 50%;
    border:1px solid red;
    line-height: 65px;
    text-align: center;
}

&lt;div class="circle"&gt;&lt;span&gt;text&lt;/span&gt;&lt;/div&gt;

【讨论】：

【解决方案7】：

border-radius: 50%; 会将所有元素变成一个圆圈，无论大小。至少，只要目标的height和width相同，否则会变成椭圆形。

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}

&lt;div id="target"&gt;&lt;/div&gt;

注意：browser prefixes are not needed anymore for border-radius

或者，您也可以使用clip-path: circle(); 将元素变成圆形。即使元素的width 比height 大（或相反），它仍然会变成圆形，而不是椭圆形。

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}

&lt;div id="target"&gt;&lt;/div&gt;

注意：clip-path is not (yet) supported by all browsers

您可以在圆圈内放置文字，只需将文字写在目标标签内即可，
如下：

<div>text</div>

如果您想在圆圈中居中文本，您可以执行以下操作：

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

【讨论】：

感谢您提及剪辑路径！

【解决方案8】：

您可以使用border-radius 属性为其赋予一个与元素的border-radius 等效的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 最终版本。）

this page 上有更多示例。至于插入文本，你可以这样做，但你必须注意定位，因为大多数浏览器的框填充模型仍然使用外部正方形。

【讨论】：

【解决方案9】：

技术上没有办法用 HTML 画圆（没有<circle> HTML 标签），但可以画圆。

绘制一个的最佳方法是将border-radius: 50% 添加到诸如div 之类的标签中。这是一个例子：

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

【讨论】：

【解决方案10】：

你可以使用border-radius属性，或者制作一个高度和宽度固定的div，背景为png圆形。

【讨论】：

【解决方案11】：

以下是我的 9 个解决方案。随意在 div 或 svg 元素中插入文本。

边界半径
剪辑路径
html 实体
伪元素
径向渐变
svg 圆和路径
画布弧（）
img 标签
前置标签

var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#B90136';
ctx.fill();

#circle1 {
  background-color: #B90136;
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

#circle2 {
  background-color: #B90136;
  width: 100px;
  height: 100px;
  clip-path: circle();
}

#circle3 {
  color: #B90136;
  font-size: 100px;
  line-height: 100px;
}

#circle4::before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: #B90136;
}

#circle5 {
  background-image: radial-gradient(#B90136 70%, transparent 30%);
  height: 100px;
  width: 100px;
}

<h3>1 border-radius</h3>
<div id="circle1"></div>
<hr/>
<h3>2 clip-path</h3>
<div id="circle2"></div>
<hr/>
<h3>3 html entity</h3>
<div id="circle3">&#11044;</div>
<hr/>
<h3>4 pseudo element</h3>
<div id="circle4"></div>
<hr/>
<h3>5 radial-gradient</h3>
<div id="circle5"></div>
<hr/>
<h3>6 svg circle & path</h3>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="#B90136" />
</svg>
<hr/>
<h3>7 canvas arc()</h3>
<canvas id="myCanvas" width="100" height="100"></canvas>
<hr/>
<h3>8 img tag</h3>
&nbsp; &nbsp; &lt;img src="circle.png" width="100" height="100" /&gt;
<hr/>
<h3>9 pre tag</h3>
<pre style="line-height:8px;">
     +++
    +++++
   +++++++
  +++++++++
 +++++++++++
 +++++++++++
 +++++++++++
  +++++++++
   +++++++
    +++++
     +++
</pre>

【讨论】：

【解决方案12】：

只需在脚本标签中执行以下操作：

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

然后你就得到了你的圈子。

【讨论】：

这应该是哪种语言？ OP 询问了 HTML5 和 CSS3。
这可以使用我在第一行@ClausWilke 中提到的脚本标签在 html 中完成
请提供一个完整的示例，然后说明您如何在 HTML 文档中使用它。有关完整示例的示例，请参阅this answer。
我认为这应该有助于您无法理解的内容，如果您愿意的话，我可以添加一张结果图片，说明圆圈的样子。 . .
没必要。我把它变成了一个代码sn-p。当您单击按钮时它会运行。

【解决方案13】：

h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}

&lt;h1&gt; &lt;br&gt;hello world&lt;/h1&gt;

【讨论】：

【解决方案14】：

.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;
}

【讨论】：

【解决方案15】：

   <head>
       <style>

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

    <body>
       <div id="circle"></div>
   </body>

简单和新手:)

【讨论】：

【解决方案16】：

这是我用于 CS 1.6 统计网站的圆圈。一个漂亮的四色圆圈。

#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;
}

&lt;div id="circle"&gt;&lt;/div&gt;

通过改变宽度和高度来调整圆的直径。

您还可以使用 skewY()、skewX() 和 rotate() 进行旋转和倾斜：

  transform: rotate(60deg);
  transform: skewY(-5deg);
  transform: skewX(-15deg);

【讨论】：

蓝色和粉色部分的阴影在错误的一侧，但除了出色的 3D 效果。
您可以根据需要更改！

【解决方案17】：

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

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

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

【讨论】：

虽然此代码可能会回答问题，但提供有关 why 和/或如何回答问题的额外上下文将显着改善其长期价值。请edit你的答案添加一些解释。

【解决方案18】：

如果您使用 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/

【讨论】：

【解决方案19】：

没有宽度和要求（只指定你喜欢的那个）
没有 SVG、画布或 Unicode

.circle {
    background: green;
    border-radius: 50%;
    width: 1rem;
    aspect-ratio: 1/1;
}

&lt;div class="circle"&gt;&lt;/div&gt;

浏览器支持：

Chrome/Edge 88+
Firefox 83+ 背后的标志

【讨论】：