순수 CSS를 사용하여 원 그리기(코드 예)

이 글에서는 코드 예시를 통해 순수 CSS를 사용하여 원을 그리는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

원을 그리는 아이디어는 매우 간단합니다. 먼저 두 개의 원을 그리고 서로 다른 배경색을 설정한 다음 두 원의 중심을 일치시키세요.

난이도 요소

☆☆

HTML

<div class="container">
    <span class="ring-style"></span>
</div>

분석:

• 여기에 상위 컨테이너가 있습니다

CSS

.container {
    position: relative;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background-color: lightgrey;
}
.ring-style {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: blue;
    width: 260px;
    height: 260px;
    border-radius: 260px;
}
.ring-style::before {
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 200px;
    height: 200px;
    border-radius: 200px;
}

분석:

• 너비, 높이 및 둥근 모양을 설정합니다. 요소 모서리 효과는 원을 그리는 것입니다
• :before 의사 요소와 온톨로지 요소를 통해 두 개의 원을 만듭니다
• 상위 컨테이너의 절대 위치를 기준으로 위쪽, 왼쪽 및 이동 속성을 설정하여, 요소는 상위 컨테이너를 기준으로 수평 또는 수직으로 정렬되어 두 원의 중심이 일치하도록 할 수 있습니다.

points

border-radius:: before && ::after

요소는 수평 및 수직 중앙에 위치합니다

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 순수 CSS를 사용하여 원 그리기(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!