如何在HTML页面中绘制圆圈?


Answers:


186

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

您必须创建一个圆角(通过border-radius)的矩形,该圆角是您要制作的圆的宽度/高度一半

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>


6
再三考虑,您可能想贴上&nbsp; 在<div>里面以确保它被显示。否则,浏览器可能会忽略它。
ryanoshea 2011年

14
我认为这个答案是错误的,因为它表示您无法在HTML5中画一个圆圈。Canvas是虽然HTML5元素,你能画在HTML5圆(w3schools.com/html/html5_canvas.asp
JKJ

19
使用-webkit-border-radius:100%; -moz-border-radius:100%;边界半径:100%;这样,您只需要自定义宽度和高度即可应用将来的更改
Arkady

3
您必须添加边框以使其可见。
哈坎2014年

4
我发现使用border-radius: 50%;效果很好,可以根据需要更改大小。对于颜色,可以使用background-colorborder
Grimeh 2015年

76

HTML 5中很有可能。您的选择包括:嵌入式SVG<canvas>标签

在嵌入式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>


53

您可以使用一些unicode圈子:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

这里的形状更多。

如果需要,您可以在圈子上叠加文字:

如果您希望有更大的机会在不同的系统上看起来一样,则也可以使用自定义字体(例如这种字体),因为并非所有计算机/浏览器都安装了相同的字体。


19

border-radius:50% 如果您想将圆调整到容器可达到的任何尺寸(例如,文本长度可变)

不要忘记-moz--webkit-前缀!


1
您必须确保宽度和高度相等,否则将创建一个椭圆形。
2013年

9

从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)上相同。


5

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


4

您可以使用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扩展的原因是为了支持CSS3最终版本的Gecko和Webkit。)

此页面上还有更多示例。至于插入文本,您可以这样做,但必须注意其位置,因为大多数浏览器的框填充模型仍使用外部正方形。


4

从技术上讲,没有办法用HTML绘制圆(没有<circle>HTML标签),但是可以绘制圆。

画一个的最好方法是在border-radius: 50%标记中添加div。这是一个例子:

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

4

border-radius: 50%;不论大小,都会将所有元素变成一个圆圈。至少,只要 height width 目标都是一样的,否则它会变成一个椭圆形

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

在浏览器前缀不是不再需要为边界半径


另外,您也可以使用clip-path: circle();将元素变成圆形。即使该元素具有较大的widthheight(或者反过来),它仍然会成为一个圆圈,而不是一个椭圆形。

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

注意并非所有浏览器都支持clip-path


您只需将文本写入目标标签的内部即可,将文本放置在圆内,
如下所示:

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


1
感谢您提及剪切路径!
umbe1987

3

您可以使用border-radius属性,也可以使div具有固定的高度和宽度,并具有png圆形的背景。


2

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

<!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中完成此操作
Dan

请提供一个完整的示例,然后说明如何在HTML文档中使用它。有关完整示例的示例,请参见此答案
克劳斯威尔克

我认为,这应该可以帮助您解决无法理解的问题,如果我想要,我可以为结果添加图片。。。
Dan

没必要 我将其放入代码段中。当您单击按钮时,它将运行。
克劳斯·威尔克,

2
  1. h1 {
    border: dashed 2px blue;
      width: 200px;
      height: 200px;
      border-radius: 100px;
      text-align: center;
      line-height: 60px;
      
    }
    <h1> <br>hello world</h1>


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

1
   <head>
       <style>

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

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

简单和新手:)


0

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

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

      <span>40%</span>

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

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


3
尽管此代码可以回答问题,但提供有关其为什么和/或如何回答问题的其他上下文将显着提高其长期价值。请编辑您的答案以添加一些解释。
Toby Speight,

0

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.