CSS Pill / 경기장 모양 생성기
CSS 테두리 반경을 시각적으로 디자인합니다. px 또는 퍼센트 단위의 4개의 독립적인 모서리 슬라이더, 인스턴트 원 및 알약을 위한 모든 모서리 연결 바로가기, 무작위 모양의 유기적 블롭 모드를 제공합니다.
처리 중...
0%
결과
이 페이지는 네 모서리가 모두 연결되어 매우 큰 반경(999px)으로 푸시되는 테두리 반경 생성기를 엽니다. 일반적인 버튼 크기의 직사각형에서 큰 반경은 브라우저에 의해 상자 높이의 정확히 절반으로 잘립니다. 이는 약간 둥근 모서리가 있는 정사각형이 아닌 완전히 둥근 알약 또는 경기장 모양을 생성합니다.
이것이 알약 버튼에 각 버튼의 높이에 맞춰 조정된 정확한 반경 값이 필요하지 않은 이유입니다. 높이의 절반보다 편안하게 큰 숫자는 동일한 잘린 결과를 제공하며, 이는 또한 999px(또는 심지어 9999px)가 CSS에서 '이것을 끝까지 둥글게 하기'에 대한 비공식 커뮤니티 약칭이 된 이유이기도 합니다.
자신만의 레이아웃으로 상자 크기를 조정하면 동일한 999px로 어떤 높이에서든 계속해서 전체 알약을 생성할 수 있습니다. 브라우저는 항상 자동으로 상자의 절반으로 클립되기 때문입니다. CSS가 제대로 보이면 복사하거나 모서리 연결을 해제하여 대신 비대칭 캡슐을 만드세요.