Làm thế nào để bạn vẽ một vòng tròn bằng HTML5 và CSS3?
Có phải cũng có thể đặt văn bản bên trong?
Câu trả lời:
Bạn không thể vẽ một vòng tròn mỗi se. Nhưng bạn có thể làm một cái gì đó giống hệt với một vòng tròn.
Bạn sẽ phải tạo một hình chữ nhật với các góc tròn (thông qua border-radius) bằng một nửa chiều rộng / chiều cao của vòng tròn bạn muốn thực hiện.
#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%;làm việc tốt, thay đổi kích thước như mong muốn. Đối với màu sắc, bạn có thể sử dụng background-colorhoặc border.
Nó hoàn toàn có thể có trong HTML 5 . Tùy chọn của bạn là: SVG nhúng và <canvas>thẻ .
Để vẽ vòng tròn trong SVG nhúng:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Khoanh tròn vào <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>Có một vài vòng tròn unicode bạn có thể sử dụng:
Nhiều hình dạng hơn ở đây .
Bạn có thể chồng văn bản lên các vòng tròn nếu bạn muốn:
Bạn cũng có thể sử dụng một phông chữ tùy chỉnh (như cái này ) nếu bạn muốn có cơ hội cao hơn nó trông giống nhau trên các hệ thống khác nhau vì không phải tất cả các máy tính / trình duyệt đều cài đặt cùng một phông chữ.
border-radius:50% nếu bạn muốn vòng tròn điều chỉnh theo bất kỳ kích thước nào mà container chứa (ví dụ: nếu văn bản có độ dài thay đổi)
Đừng quên -moz-và -webkit-tiền tố!
Kể từ năm 2015, bạn có thể tạo nó và căn giữa văn bản chỉ với 15 dòng 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>Không có bất kỳ -webkit- s , cái này hoạt động trên IE11, Firefox, Chrome và Opera và nó là HTML5 (thử nghiệm) và CSS3 hợp lệ.
Tương tự trên MS Edge (2020).
.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>Bạn có thể sử dụng thuộc tính bán kính đường viền để cung cấp cho nó bán kính đường viền tương đương với bán kính đường viền của phần tử. Ví dụ:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(Lý do sử dụng các tiện ích mở rộng -moz và -webkit là để hỗ trợ các phiên bản cuối cùng của CSS3 của Gecko và Webkit.)
Có nhiều ví dụ trên trang này . Theo như chèn văn bản, bạn có thể làm điều đó nhưng bạn phải chú ý đến việc định vị, vì hầu hết mô hình đệm hộp của trình duyệt vẫn sử dụng hình vuông bên ngoài.
Về mặt kỹ thuật không có cách nào để vẽ một vòng tròn bằng HTML (không có <circle> thẻ HTML), nhưng có thể vẽ một vòng tròn.
Cách tốt nhất để vẽ một cái là thêm border-radius: 50%vào một thẻ như div. Đây là một ví dụ:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;sẽ biến tất cả các yếu tố thành một vòng tròn, bất kể kích thước. Ít nhất, miễn là height và width của mục tiêu là như nhau, nếu không nó sẽ biến thành hình bầu dục .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Lưu ý : không cần tiền tố trình duyệt nữa cho bán kính đường viền
Ngoài ra, bạn cũng có thể sử dụng clip-path: circle();để biến một phần tử thành một vòng tròn. Ngay cả khi phần tử có lớn widthhơn height(hoặc ngược lại), nó vẫn sẽ trở thành một hình tròn chứ không phải hình bầu dục.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Lưu ý : đường dẫn clip không (chưa) được hỗ trợ bởi tất cả các trình duyệt
Bạn có thể đặt văn bản bên trong vòng tròn, chỉ cần viết văn bản bên trong các thẻ của mục tiêu,
như vậy:
<div>text</div>Nếu bạn muốn căn giữa văn bản trong vòng tròn, bạn có thể làm như sau:
#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>Chỉ cần làm như sau trong các thẻ 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>Và ở đó bạn đi bạn có vòng tròn của bạn.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}<h1> <br>hello world</h1>.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>đơn giản và mới lạ :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->Nếu bạn đang sử dụng sass để viết CSS, bạn có thể làm:
@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;
}Đầu ra nào:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Dùng thử tại đây: https://www.sassmeister.com/