HTML5 및 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>답변
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>답변
사용할 수있는 몇 가지 유니 코드 서클이 있습니다.
다음과 같은 경우 원에 텍스트를 오버레이 할 수 있습니다.
모든 컴퓨터 / 브라우저에 동일한 글꼴이 설치되어 있지 않기 때문에 다른 시스템에서 동일하게 보일 가능성이 더 높은 경우 사용자 지정 글꼴 (예 : 이 글꼴)을 사용할 수도 있습니다 .
답변
border-radius:50% 컨테이너가 가져 오는 크기에 따라 원을 조정하려는 경우 (예 : 텍스트가 가변 길이 인 경우)
-moz-및 -webkit-접두사를 잊지 마세요 !
답변
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-IE11, Firefox, Chrome 및 Opera에서 작동하며 유효한 HTML5 (실험용) 및 CSS3입니다.
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>답변
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 확장을 사용하는 이유는 Gecko 및 Webkit의 CSS3 최종 버전 이전 버전을 지원하기위한 것입니다.)
이 페이지 에는 더 많은 예제가 있습니다 . 텍스트를 삽입하는 것에 관해서는 할 수 있지만 대부분의 브라우저의 상자 패딩 모델은 여전히 바깥 쪽 사각형을 사용하므로 위치에 유의해야합니다.
