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

小开

可以使用 orders-桡属性赋予它一个与元素的 orders-桡相等的 edge-桡。例如:

<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之前的最终版本。)

在这一页上有更多的例子。至于插入文本，你可以做到这一点，但你必须留意定位，因为大多数浏览器的方框填充模型仍然使用外方块。

小开

最佳答案

你本身不能画一个圆，但是你可以画一个和圆一模一样的东西。

你必须创建一个圆角矩形(通过 border-radius) ，这是 宽度/高度的一半的圆你想要的。

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

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

小开

可以使用 orders-桡属性，也可以创建具有固定高度和宽度的 div，以及具有 png 圆的背景。

小开

如果你想让圆调整到容器得到的任何尺寸(例如，如果文本是可变长度)

~~不要忘记 -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>

小开

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

小开

技术上没有一种方法来绘制一个圆与 HTML (没有一个 <circle> HTML 标记) ，但一个圆可以绘制。

最好的绘制方法是将 border-radius: 50%添加到诸如 div之类的标记中:

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

小开

您可以使用几个 unicode 圆:

* { font-size: 50px; }

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

更多形状给你。

如果你愿意，你可以把文字叠加在圆圈上:

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

你也可以使用自定义字体(如这个一) ，如果你想有一个更高的机会，它看起来相同的不同系统，因为不是所有的计算机/浏览器有相同的字体安装。

小开

到2015年，你可以使用最少15行的 CSS (小提琴)来制作并居中显示文本:

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)也是如此。

小开

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


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


<span>40%</span>


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


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

小开

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

小开

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

}

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

小开

   <head>
<style>


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


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

简单而新手:)

小开

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

小开

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

小开

只需在 script 标记中执行以下操作:

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

就是这样，你得到了你的圆。

小开

无论大小，border-radius: 50%;都会把所有元素变成一个圆。

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

<div id="target"></div>

Note: browser prefixes are not needed 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 width than height (or the other way around), it will still become a circle, and not an oval.

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

如果你想在中心文本的圆圈，你可以做到以下几点:

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

小开

下面是我的9个解决方案。

边界-半径
夹式路径
Html 实体
伪元素
径向梯度
圆与路径
帆布弧()
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>

小开

这是我在 CS1.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;
}

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

Adjust the circle diameter by chaging the width and height.

You can also rotate and skew by using skewY(), skewX() and rotate():

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

小开

无宽度还有高度要求(只指定您喜欢的)
没有 SVG、画布或 Unicode

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

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

Borwser support:

Chrome/Edge 88+
Firefox 83+ behind a flag