요소 크기보다 훨씬 큰 CSS 테두리 반지름 사용

Question

요소 크기보다 훨씬 큰 border-radius을 사용하는 데 문제가 있습니까?

<img width="80" height="80" alt="My Gravatar" class="circle" src="https://www.gravatar.com/avatar/b262eb4b3bf006cf68ef60eae63ddffc"> 

: 지금은, 그것을 원하기 때문에 좋아하는 모든 요소에이 클래스를 적용 할 수 있습니다 그래서

.circle { 
    -webkit-border-radius: 1000px; 
    -moz-border-radius: 1000px; 
    border-radius: 1000px; 
} 

: 내가 지금 같은 클래스 .circle을하기를 원한다면 예를 들어

,

나는 지금까지 어떤 문제도 겪어 본 적이 없다는 것을 알고 있지만, 나는 더 많은 문제를 해결하기 위해 나 자신을 설정하고 있습니까?

Answer 1

여기에 문제가 전혀 없습니다. 원하는 경우 어디서나 수업을 자유롭게 적용 할 수 있습니다. 문제는 없습니다. (높이 또는 너비가 0보다 작은) 요소는 원이되며, 높이 또는 너비가 더 큰 요소는 2000px이 원형이되지 않고 오히려 원래 모양을 유지하지만 크게 둥근 모서리를 갖습니다.

이

는 W3 here에서 자랐다 : 모든 수평 반경 박스 큰 절반 폭이면

가

"그것을 그 값 감소되는 임의의 수직 반경의 절반보다 큰 경우. 상자의 높이가 이면 그 값으로 줄어 듭니다. (가로 4 개와 세로 4 개의 반지름이 있습니다.) 이것은 모든 개 항목과는 독립적으로 각 반지름을 조사하기 때문에 쉬운 알고리즘입니다. 그러나 유용한 테두리는 허용되지 않습니다 크기가 크고 작은 문자 인 개를 결합하여 1/4 원을 분기 타원. " - The documentation of the border-radius property

난 당신이 값으로 백분율을 사용할 수 있음을 언급해야한다는 요소 주어진 원을 만듭니다 최대 인 50 %는 원래 사각형이다. 요소가 정사각형이 아니면 타원을 만듭니다.

모든 구석에 적용 할 때 (예 : border-radius:50% 각 구석에 적용 할 때와 같이) 50 %를 초과하는 모든 값은 50 %와 같습니다. 의견에 jbutler483 pointed out과 같이 개별 구석에 적용하면 50 %는 서로 결합하는 방식 때문에 100 %와 같지 않습니다. 대신 100 % 이상의 모든 값은 100 %와 같습니다.

요소가 정사각형이 아닌 경우 border:50% 및 border:really-high-pixel-value과 같은 효과가 다를 수 있다는 점도 중요합니다.