CSS `border-radius`의 픽셀 대 백분율: 어떻게 다릅니까?-CSS 튜토리얼-php.cn

CSS `border-radius`의 픽셀 대 백분율: 어떻게 다릅니까?

DDD

풀어 주다： 2024-12-27 22:37:12

원래의

202명이 탐색했습니다.

Pixel vs. Percentage in CSS `border-radius`: How Do They Differ?

Border-radius: Pixel or Percentage?

CSS를 사용하여 요소의 테두리 반경을 정의할 때 다음 사항을 알 수 있습니다. 결과 모양은 픽셀 값을 사용하는지, 백분율 값을 사용하는지에 따라 달라집니다. 이 기사에서는 이러한 현상이 발생하는 이유를 자세히 알아보고 디자인에 미치는 영향을 살펴보겠습니다.

경계 반경 속성

경계- radius 속성은 요소 모서리의 곡선을 지정합니다. 모퉁이 모양을 정의하는 1/4 타원의 X 및 Y축 반경을 나타내는 두 개의 값을 허용합니다.

백분율 값

에 따르면 W3C 사양에서 border-radius의 백분율 값은 요소 테두리의 너비와 높이를 나타냅니다. 상자.

예: border-radius: 50%; 반경을 다음과 같이 정의합니다:

X축 반경: 컨테이너 너비의 50%

Y축 반경:

이렇게 하면 두 축의 반지름이 동일한 타원형 모양이 됩니다.

픽셀 및 기타 단위< /h3>

백분율 이외의 단위 사용 (예: 픽셀, em, 뷰포트 단위)은 반경이 동일한 타원을 생성하여 효과적으로 원을 만듭니다.

그러나 결과 원이 요소의 테두리와 겹치는 경우 다른 규칙은 다음과 같습니다. 적용된. 반경은 요소의 가장 작은 면 크기의 절반으로 줄어듭니다. 이렇게 하면 곡선이 요소의 경계를 넘어 확장되지 않습니다.

예에서:

 배경: 청록색;<br> 테두리 반경: 999px;<br> 너비: 230px;<br> 높이: 100px;<br> ...<br>}

<p></div></p>
<p><p>테두리 반경: 999px; 원을 만들 것입니다. 그러나 원이 요소의 높이와 겹치기 때문에 반경은 높이의 절반인 50px로 조정됩니다.</p><br><p>이 요소의 경우 픽셀과 백분율을 모두 사용하여 동일한 결과를 얻을 수 있습니다. 너비와 높이의 50%는 다음과 같습니다. 115px/50px:</p></p>
<p><div><div class="snippet-code"><br><pre class="brush:php;toolbar:false"> border-radius: 50%;<br>}<br>.pixels {<br> 테두리 반경: 115px/50px;<br>}<br>/<em> ... </em>/

<div class="pixels">border-radius: 115px/50px;</div>

위 내용은 CSS `border-radius`의 픽셀 대 백분율: 어떻게 다릅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!