CSS에서 반원을 구현하는 방법-프런트엔드 Q&A-php.cn

CSS에서 반원을 구현하는 방법

藏色散人

풀어 주다： 2021-05-27 11:40:35

원래의

4154명이 탐색했습니다.

CSS에서 반원을 구현하는 방법: 먼저 HTML 샘플 파일을 만든 다음 본문에 p 태그를 입력하고 높이를 너비의 절반으로 설정하고 왼쪽 상단 모서리와 오른쪽 상단 모서리의 필렛 반경을 다음과 같이 정의합니다. 요소의 높이 일관성; 마지막으로 오른쪽 아래 모서리와 왼쪽 아래 모서리의 모깎기 반경을 0으로 정의하여 반원 효과를 얻습니다.

CSS에서 반원을 구현하는 방법

이 기사의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS에서 반원을 구현하는 방법은 무엇입니까?

반원

반원은 위쪽 반원, 아래쪽 반원, 왼쪽 반원, 오른쪽 반원으로 나누어집니다. 특정 방향으로 반원을 만드는 방법만 배우면 다른 방향의 반원도 쉽게 구현할 수 있습니다. 동일합니다.

상부 반원을 만들려면 구현 원리는 높이를 너비의 절반으로 설정하고 왼쪽 상단 모서리와 오른쪽 상단 모서리의 필렛 반경을 요소의 높이와 동일하게 정의하고 정의합니다. 오른쪽 하단 모서리와 왼쪽 하단 모서리의 필렛 반경은 0.

이고 오른쪽 하단 모서리와 왼쪽 하단 모서리의 필렛 반경은 0.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>半圆角</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 50px;
            border:1px solid black;
            background-color: blue;
            border-radius: 100px 100px 0 0;
        }
    </style></head><body>
    <p></p></body></html>

로그인 후 복사

결과:

원으로 정의됩니다.

구현 방법: 너비와 높이를 동일하게 설정한 다음 네 모퉁이 필렛 반경을 설정합니다. 너비와 높이의 절반입니다.

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>圆</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 100px;
            border:1px solid black;
            background-color: blue;
            border-radius: 50px;
        }
    </style></head><body>
    <p></p></body></html>

로그인 후 복사

결과: