Question

如何使用HTML5和CSS3绘制圆圈？

是否也可以将文字放在里面？

Answer 1

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

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

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

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

Answer 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()

<canvas id="circlecanvas" width="100" height="100"></canvas>

Answer 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之一），因为并非所有计算机/浏览器都安装了相同的字体。

Answer 4

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

不要忘记-moz-和-webkit-前缀！

Answer 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-，这适用于Windows7上的IE11，Firefox，Chrome和Opera，它是有效的HTML5（实验性）和CSS3。

Answer 6

技术上没有办法用HTML绘制圆圈（没有<circle> HTML标记），但可以绘制圆圈。

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

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

Answer 7

无论大小如何，

border-radius: 50%;都会将所有元素转换为圆形。至少，只要目标的 height 和 width 相同，否则它将变为椭圆< / em>的

＆＃13;
＆＃13;
#target{ width: 100px; height: 100px; background-color: #aaa; border-radius: 50%; }
＆＃13;
<div id="target"></div>
＆＃13;
＆＃13;
＆＃13;

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

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

＆＃13;
＆＃13;
#target{ width: 200px; height: 100px; background-color: #aaa; clip-path: circle(); }
＆＃13;
<div id="target"></div>
＆＃13;
＆＃13;
＆＃13;

事实上，您可以clip-path使用turn elements into all kinds of shapes

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

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

<div>text</div>

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

＆＃13;
＆＃13;
#target{ width: 100px; height: 100px; background-color: #aaa; border-radius: 50%; display: flex; align-items: center; } #text{ width: 100%; text-align: center; }
＆＃13;
<div id="target"> <div id="text">text</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 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-final版本。）

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

Answer 9

您可以使用border-radius属性，或者使用固定的高度和宽度制作div，使用png圆圈制作背景。

Answer 10

＆＃13;

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

＆＃13;

<div class="circle"><span>text</span></div>

＆＃13;

Answer 11

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

＆＃13;

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

＆＃13;

你去了你的圈子。

Answer 12

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

Answer 13

   <head>
       <style>

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

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

简单和新手：）

Answer 14

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

<h1> <br>hello world</h1>

Answer 15

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

Answer 16

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

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

      <span>40%</span>

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

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

Answer 17

以下是我的9种解决方案。随时将文本插入div或svg元素。

边界半径
剪切路径
html实体
伪元素
径向渐变
svg圆和路径
画布arc（）
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>

Answer 18

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

from tempfile import NamedTemporaryFile
import shutil
import csv

filename = input("File Name in current folder: ")

tempfile = NamedTemporaryFile("w+t", newline='', delete=False)

with open(filename, "rt") as csvFile, tempfile:
    reader = csv.reader(csvFile, delimiter=",", quotechar='"')
    writer = csv.writer(tempfile, delimiter=",", quotechar='"')
    
    for row in reader:
        if len(row[21]) > 30000:
            row.append(row[21][-20003:])
            row[21] = row[21][:-20003]
            
        writer.writerow(reader.fieldnames + ['overflow'])
        writer.writerow(row)

shutil.move(tempfile.name, filename)

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

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

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

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

Answer 19

没有宽度和高度要求（指定您喜欢的任何一个）
无 SVG、画布或 Unicode

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

<div class="circle"></div>

浏览器支持：

Chrome/Edge 88+
Firefox 83+ 的标志

如何在html页面中绘制圆圈？

19 个答案: