CSS 원 생성기 - 테두리 반경 50%
CSS 테두리 반경을 시각적으로 디자인합니다. px 또는 퍼센트 단위의 4개의 독립적인 모서리 슬라이더, 인스턴트 원 및 알약을 위한 모든 모서리 연결 바로가기, 무작위 모양의 유기적 블롭 모드를 제공합니다.
처리 중...
0%
결과
이 페이지는 네 모서리가 모두 연결되어 있고 CSS만 사용하여 상자를 원으로 바꾸는 값인 50%로 설정된 테두리 반경 생성기를 엽니다. 솔직히 말해서 정사각형 상자에서는 완벽한 원이 만들어지지만 직사각형 상자에서는 동일한 50%가 경기장과 같은 타원을 생성합니다. 왜냐하면 각 모서리는 해당 분기만 반올림하기 때문입니다.
50% 테두리 반경은 CSS에서 원형 아바타, 아이콘 배지 및 상태 점을 만드는 가장 일반적인 방법이기 때문에 이러한 구별이 중요합니다. 마스크로 원을 자르거나 SVG에서 원을 그리는 것보다 훨씬 간단하고, 고정된 픽셀 반경이 아닌 상대적인 백분율이기 때문에 어떤 크기에서도 선명하게 유지됩니다.
CSS에서 상자를 고정된 정사각형 크기로 전환하여 완벽한 원에 고정하거나 알약 모양을 위해 일부러 직사각형으로 두십시오. 어느 쪽이든 모서리가 여기에 연결되어 있으므로 결과 CSS를 복사하는 동안 단일 슬라이더가 4개 모두 동기화를 유지합니다.