CSS 경계 반경 생성기

CSS Border Radius Generator 는 CSS border-radius 속성의 시각적 편집기입니다. 각 모서리에 대해 슬라이더를 드래그하고 실시간으로 미리보기 요소 라운드를 시청하고 생성 된 정확한 CSS 를 복사합니다 - 픽셀 값을 추측하지 않고 페이지를 다시로드하지 않습니다.

Border-Radius 속성은 단순해 보이지만 사람들을 위로 넘어가는 컴팩트한 속기입니다. 하나의 값은 네 모서리를 모두 돌고, 두 개의 값은 두 개의 대각선을 설정하고, 4개의 값은 왼쪽 상단에서 시계 방향으로 실행됩니다. 이 도구를 사용하면 각 모서리를 독립적으로 설정한 다음 가장 짧은 동등한 속기를 자동으로 출력하여 CSS가 깨끗하게 유지됩니다.

모든 것이 브라우저에서 실행됩니다. 카드, 알약, 원 또는 얼룩과 같은 사전 설정에서 시작하여 각 모서리를 미세 조정하고 단위를 픽셀과 백분율 사이에서 전환한 다음 선언을 복사합니다. 계정이 없고 업로드가 없으며 페이지가 로드되면 오프라인에서 계속 작동합니다.

백분율과 픽셀은 정사각형이 아닌 모든 것에서 다르게 동작하며 그 차이는 사람들을 놀라게 합니다. 픽셀 반경은 모든 모서리에서 동일한 곡선이고 백분율은 각 축에 대해 별도로 측정되므로 넓은 상자에 50 퍼센트는 원이 아닌 타원을 제공합니다. 즉,직사각형을 알약이나 렌즈 모양으로 바꾸는 속성입니다. 사양은 또한 불가능한 기하학으로부터 사용자를 보호합니다: 한쪽 가장자리를 따라 있는 반경을 더하면 해당 가장자리의 길이보다 더 커지면 브라우저는 요소의 모든 반경을 겹치는 대신 비례적으로 축소하므로 큰 값은 조용히 성장을 멈춥니다. 출력은 가장 짧은 유효한 약칭을 사용하므로 4 개의 동일한 모서리가 단일 숫자로 붕괴됩니다.

테두리 반경 CSS 생성기로서 유용한 부분은 당신을 위해 속기 산술을 수행한다는 것입니다. px 에서 왼쪽 상단과 오른쪽 하단을 24 로,오른쪽 상단과 왼쪽 하단을 8 로 설정하고 출력은 테두리 반경을 읽습니다: 24px 8px; 대각선 쌍이 일치하기 때문에 오른쪽 하단을 0 으로 떨어 뜨리면 오른쪽 상단과 왼쪽 하단이 여전히 일치하기 때문에 3 값 24px 8px 0px 가됩니다. 복사하기 전에 미리보기와 비교하여 각 결과를 확인할 수 있으며 이는 CSS 테두리 반경 생성기의 용도입니다.