Border Radius Generator
Generate border radius
Generate border radius 브라우저에서 로컬로 실행됩니다.
border-radius: 12px;
About the
Border Radius Generator는 실시간 미리보기를 통해 상자의 네 모서리를 독립적으로 설정하고 CSS를 제공합니다. 속기의 순서는 모두가 잊어버리는 것입니다. 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래, 왼쪽 위부터 시계 방향으로 진행됩니다. 하나의 값은 네 모서리 모두에 적용되고, 두 값은 대각선 쌍에 적용되며, 네 값은 차례로 각 모서리에 적용됩니다. 네 가지가 모두 일치하면 도구는 실제로 대부분 원하는 단일 값 형식을 내보냅니다.
Where people use the
- 픽셀 값을 추측하지 않고 반경을 디자인 사양에 일치시킵니다.
- 카드나 모달의 상단 모서리만 둥글게 만듭니다.
- 요소 높이의 절반 반경인 알약 버튼 모양을 만듭니다.
- 정사각형 아바타를 원으로 바꾸는 반경을 찾는 것입니다.
How to use the
- 1
모서리 슬라이더 드래그
각 모서리에는 0에서 150픽셀까지의 자체 슬라이더가 있습니다. 미리보기 상자는 이동함에 따라 둥글게 됩니다.
- 2
모서리를 연결된 상태로 유지하거나 연결을 해제하세요.
링크가 켜진 상태에서 슬라이더를 움직이면 네 개가 모두 함께 이동합니다. 이 기능을 꺼서 개별 모서리 모양을 만들면 말풍선 꼬리나 나뭇잎 모양을 만들 수 있습니다.
- 3
CSS 읽기
네 가지가 모두 일치하면 단일 값 약칭을 얻습니다. 서로 다른 경우 시계 방향 순서로 전체 4개 값 형식을 얻게 됩니다.
- 4
대신 백분율을 고려하십시오.
정사각형 요소의 반경이 50%이면 원이 됩니다. 필요한 경우 스타일시트의 백분율 단위를 px 단위로 바꾸세요.
팁 및 모범 사례
- 요소의 크기가 조정되면 백분율을 사용하고 그렇지 않으면 픽셀을 사용하십시오.
- 알약 버튼은 고정된 반경이 아닙니다. 높이는 절반이므로 9999px는 게으르지만 강력한 대답입니다.
- 구성 요소 세트 전체에서 반경을 일관되게 유지하십시오. 4px, 6px 및 8px를 혼합하는 것은 우연한 것처럼 보입니다.
자주 묻는 질문
네 가지 값의 순서는 무엇입니까?
왼쪽 상단부터 시계방향으로 왼쪽 상단, 오른쪽 상단, 오른쪽 하단, 왼쪽 하단. 유용한 니모닉은 읽기 시작하는 곳에서 시작하여 시계 문자판처럼 돌아간다는 것입니다.
두 개 또는 세 개의 값은 무엇을 의미합니까?
두 가지 값이 대각선을 설정합니다. 첫 번째 값은 왼쪽 상단과 오른쪽 하단이고, 두 번째 값은 오른쪽 상단과 왼쪽 하단입니다. 세 가지 값은 왼쪽 상단, 오른쪽 상단과 왼쪽 하단을 함께 설정한 다음 오른쪽 하단을 설정합니다.
원은 어떻게 만드나요?
이미 정사각형인 요소에는 50%를 사용하세요. 픽셀을 사용하면 반경이 너비의 절반인 경우에만 원이 제공되며, 이는 요소 크기가 조정되는 순간 중단됩니다.
모서리를 수평과 수직으로 다르게 둥글게 할 수 있습니까?
전체 구문에서는 수평 값, 슬래시, 수직 값으로 작성된 타원형 반경을 허용합니다. 이 도구는 더 단순한 균일 형태를 생성하므로 해당 모양이 필요한 경우 슬래시 버전을 직접 추가하세요.
둥근 모서리가 잘린 이유는 무엇입니까?
하위 콘텐츠가 둥근 상자에 잘리지 않기 때문입니다. 요소에 숨겨진 오버플로를 추가하세요. 그렇지 않으면 그 안에 있는 이미지나 배경에 여전히 사각형 모서리가 표시됩니다.