如何使用HTML5和CSS3画圆?
也可以在其中放入文字吗?
如何使用HTML5和CSS3画圆?
也可以在其中放入文字吗?
Answers:
本身不能画一个圆。但是您可以制作与圆相同的东西。
您必须创建一个圆角(通过border-radius
)的矩形,该圆角是您要制作的圆的宽度/高度的一半。
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}
<div id="circle"></div>
border-radius: 50%;
效果很好,可以根据需要更改大小。对于颜色,可以使用background-color
或border
。
在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>
从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)上相同。
您可以使用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;"> </div>
(使用-moz和-webkit扩展的原因是为了支持CSS3最终版本的Gecko和Webkit。)
此页面上还有更多示例。至于插入文本,您可以这样做,但必须注意其位置,因为大多数浏览器的框填充模型仍使用外部正方形。
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>
如果您想使文本在圆中居中,可以执行以下操作:
#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>
只需在脚本标签中执行以下操作:
<!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>
然后您就可以进入圈子了。
.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;
}
<head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
简单和新手:)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->
如果您使用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/