rya*_*hea 174
你不能画一个圆圈本身.但你可以做一些与圆相同的东西.
您必须创建一个圆角(通孔border-radius)的矩形,它是您想要制作的圆的宽度/高度的一半.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>jkj*_*jkj 74
在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>Ale*_*lex 51
您可以使用几个unicode圈子:
* { font-size: 50px; }○
◌
◍
◎
●这里有更多形状.
如果您愿意,可以在圈子上叠加文字:
#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>如果您希望在不同系统上看起来相同,则可以使用自定义字体(如此),因为并非所有计算机/浏览器都安装了相同的字体.
Lea*_*rou 19
border-radius:50% 如果您希望圆圈调整到容器获得的任何尺寸(例如,如果文本是可变长度)
别忘了-moz-和-webkit-前缀!
从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,这适用于Windows7上的IE11,Firefox,Chrome和Opera,它是有效的HTML5(实验性)和CSS3.
小智 5
从技术上讲，没有一种方法可以用 HTML 绘制圆（没有\xe2\x80\x99t<circle> HTML 标记），但可以绘制圆。
绘制一个的最佳方法是添加border-radius: 50%到标签，例如div。这里\xe2\x80\x99s 是一个例子：
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>\n.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>border-radius: 50%;将所有元素变成一个圆圈，无论大小。至少，只要 height 和 width 目标都是一样的，否则它会变成一个椭圆形。
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>或者，您也可以使用clip-path: circle();将元素变成圆形。即使该元素具有较大的width比height（或者反过来），它仍然会成为一个圆圈，而不是一个椭圆形。
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>您可以将文本放置在圆圈内，只需将文本写入目标标签内，
如下所示：
<div>text</div>
如果要使圆圈中的文本居中，可以执行以下操作：
<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;
}以下是我的9个解决方案。您可以随意将文本插入 divs 或 svg 元素中。
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">⬤</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>
<img src="circle.png" width="100" height="100" />
<hr/>
<h3>9 pre tag</h3>
<pre style="line-height:8px;">
+++
+++++
+++++++
+++++++++
+++++++++++
+++++++++++
+++++++++++
+++++++++
+++++++
+++++
+++
</pre>