CSS3의 border-radius 속성을 사용하여 일반 그래픽 만들기

CSS3에는 많은 새로운 속성이 추가되었으며 그 중 일부는 매우 실용적이어서 작업 효율성을 향상시킬 뿐만 아니라 페이지를 더 보기 좋게 만듭니다. 예를 들어 CSS3의 border-radius 속성을 이를 사용하면 일반적으로 사용되는 그래픽을 그릴 수 있어 아티스트의 부담을 줄일 수 있습니다. 이 글에서는 border-radius 속성을 사용하여 완벽한 원, 반원, 섹터 및 호를 만드는 방법을 공유합니다. 관심 있는 친구들은 한 번 보시고 도움이 되셨으면 좋겠습니다.

1. 완벽한 원을 만들려면 border-radius를 사용하세요.

border-radius 속성의 네 가지 값은 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리를 나타냅니다. 설정되면 네 모서리의 크기가 동일하다는 의미입니다. 원을 그릴 때 네 모서리 값을 div 길이의 절반으로 설정하면 됩니다. div의 길이와 너비는 모두 200px이고 네 모서리 값은 50%(여기서는 100px)입니다. ). 코드는 다음과 같습니다.

div{
    width: 200px;
    height: 200px;
    background: orangered;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

렌더링:

2. border-radius를 사용하여 반원을 만듭니다

반원의 왼쪽 상단과 오른쪽 상단은 둥근 모서리이고 오른쪽 하단은 모서리가 둥글게 됩니다. 왼쪽 하단 모서리는 직각입니다. 왼쪽 상단과 오른쪽 상단의 값을 div 길이의 절반으로 설정하고 오른쪽 하단과 왼쪽 하단의 값을 0으로 그대로 두고 높이 값을 절반으로 설정합니다. 원래 높이는 표준 반원이 됩니다. 코드는 다음과 같습니다.

div{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px 100px 0 0;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
    }

렌더링:

3. border-radius를 사용하여 부채꼴 모양을 만듭니다

부채꼴 모양의 왼쪽 상단은 둥근 모서리이고 나머지 세 모서리는 직각. 왼쪽 상단 모서리의 값을 너비 및 높이와 동일한 값으로 설정하고 다른 세 모서리의 값은 변경하지 않고(0과 동일) 그대로 두십시오. 코드는 다음과 같습니다:

div{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 200px 0 0;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

Rendering:

4. border-radius를 사용하여 호 만들기

호의 두 반대 각도는 변경되고 나머지 두 반대 각도는 변경되지 않습니다. 왼쪽 상단 모서리와 오른쪽 하단 모서리를 너비 및 높이와 동일한 값으로 설정하고 오른쪽 상단 모서리와 왼쪽 하단 모서리를 변경하지 않은 상태로 둡니다(0과 같음). 또한 평평한 호로 회전하려면 변환 속성을 추가하세요. 코드는 다음과 같습니다:

div{
    width: 200px;
    height: 200px;
    background: red;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    border-radius: 200px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   }

렌더링:

위에서는 CSS3의 border-radius 속성에 대한 몇 가지 실용적인 기술을 소개합니다. 관심 있는 친구들이 페이지를 레이아웃할 때 이를 사용하여 간단한 그래픽을 그릴 수 있습니다. 직접 시도해 보고 다른 멋진 효과를 만들 수 있는지 확인하세요.

위 내용은 CSS3의 border-radius 속성을 사용하여 일반 그래픽 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!