border-radius 는 대부분의 사람들이 배우는 첫 번째 CSS 속성 중 하나이며 완전히 이해하는 마지막 속성 중 하나입니다. 카드의 네 모서리를 모두 12 픽셀 반올림하는 것은 쉽습니다. 그런 다음 버튼은 모든 너비의 알약이어야하고 아바타는 원이어야하며 채팅 버블은 하나의 날카로운 모서리가 필요하며 갑자기 약칭 순서,그 사이의 차이 50% 그리고 999px그리고 "stops growing" 모든 것이 중요합니다.
이 가이드는 사양에서 속성이 어떻게 작동하는지 설명합니다: 각 값 개수가 무엇을 의미하는지, 백분율이 픽셀과 어떻게 다른지, 브라우저가 너무 큰 반경을 어떻게 조정하는지, 일반적인 모양을 만드는 방법, 둥근 모서리가 때때로 나타나지 않는 이유와 비교하여 예제를 확인합니다 CSS 경계 반경 생성기각 모서리를 실시간으로 미리보고 가장 짧은 유효한 약어를 출력하는. 중 하나입니다 CSS 도구 툴즈에.
TL;DR:
border-radiusrounds an element's corners. 하나의 값은 네 모서리를 모두 설정하고,두 값은 왼쪽 상단/오른쪽 하단 및 오른쪽 상단/왼쪽 하단 쌍을 설정하고,세 값은 왼쪽 상단으로 설정한 다음 오른쪽 상단과 왼쪽 하단을 함께 설정한 다음 오른쪽 하단,왼쪽 상단에서 시계 방향으로 실행됩니다. 픽셀 반경은 고정 곡선입니다; 백분율은 너비와 높이에 대해 별도로 측정됩니다50%정사각형 위에만 원을 만듭니다. 변을 따라 반지름이 더해져 변보다 더 커지면 브라우저는 모든 반지름을 비례적으로 아래로 확장합니다. The 경계 반경 생성기 고객 측, 무료, 가입 없음 등의 약칭을 처리합니다.
CSS border-radius 속성은 무엇을 합니까?
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 border-radius 속성은 element's 테두리 상자의 바깥쪽 모서리를 둥글게 만듭니다. 각 모서리는 수평 반경과 수직 반경을 갖는 타원의 4 분의 1 이 됩니다. 두 반경이 같을 때 모서리는 4 분의 1 원입니다.
W3C 에 정의되어 있다 CSS 배경 및 테두리 모듈 레벨 3및 는 10년 넘게 모든 주요 브라우저에서 접두사가 없는 상태로 지원되어 왔으므로 공급업체 접두사가 필요하지 않습니다.
반올림은 경계선보다 더 많은 영향을 미칩니다. element's 배경은 둥근 모양,에 잘립니다 box-shadow 곡선을 따르며 최신 브라우저에서도 마찬가지입니다 outline. 요소 내부의 내용은 추가하지 않는 한 잘리지 않습니다 overflow: hidden둥근 모서리가 실패하는 것처럼 보이는 가장 일반적인 이유는 다음과 같습니다.
국경-반경 속기는 어떻게 작동합니까?
border-radius 네 가지 손 속성의 약어입니다: border-top-left-radius, border-top-right-radius, border-bottom-right-radius 그리고 border-bottom-left-radius니다. 당신이 주는 값의 개수는 각 값이 적용되는 코너를 결정합니다.
| 가치 | 예 | 왼쪽 상단 | 오른쪽 상단 | 오른쪽 하단 | 왼쪽 하단 |
|---|---|---|---|---|---|
| 1 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 100 X 1 | border-radius: 16px; |
16px | 16px | 16px | 16px |
| 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X | border-radius: 24px 8px; |
24px | 8px | 24px | 8px |
| 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | border-radius: 24px 8px 0px; |
24px | 8px | 0px | 8px |
| 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | border-radius: 20px 10px 5px 0px; |
20px | 10px | 5px | 0px |
패턴은 에서 사용하는 시계 방향 순서와 동일합니다 margin 그리고 padding가, 윗면 대신 왼쪽 위 모서리에서 시작. 누락된 값은 대각선 파트너에서 채워집니다: 두 값으로, 오른쪽 아래 복사본은 왼쪽 위, 왼쪽 아래 복사본은 오른쪽 위, 왼쪽 아래 복사본은 오른쪽 위입니다.
생성기는 이 과정을 반대로 합니다. 여러분은 각각의 모서리를 자체 슬라이더로 설정하고,같은 모양을 만들어내는 가장 적은 값을 씁니다:
- 네 모서리가 모두 같으면 하나의 값이 제공됩니다.
- 왼쪽 상단은 오른쪽 하단과 같고 오른쪽 상단은 왼쪽 하단과 같으며 두 개의 값을 제공합니다.
- 오른쪽 상단은 왼쪽 하단과 동일하지만(다른 대각선은 다름) 세 가지 값을 제공합니다.
- 다른 것은 4개를 줍니다.
하나의 결과는 사람들을 놀라게합니다. 왼쪽 상단 모서리 만 20px 로 둥글게하고 출력은 border-radius: 20px 0px 0px;4값이 아닙니다 20px 0px 0px 0px. 둘 다 맞습니다; 오른쪽 상단과 왼쪽 하단이 모두 0이기 때문에 3값 형식이 더 짧습니다. 모든 값은 단위를 유지하므로 0 모서리는 다음과 같이 인쇄됩니다 0px.
border-radius의 px와 %의 차이점은 무엇입니까?
픽셀 반경은 절대 크기입니다. 백분율 반경은 element's 크기에 상대적이며,수평 및 수직 부분은 별도로 측정됩니다: 폭에 대한 수평 반경,높이에 대한 수직 반경.
정사각형에서는 같은 숫자입니다 직사각형에서는 그렇지 않습니다. 이것이 바로 그 이유입니다 50% 정사각형을 원으로 바꾸고 직사각형을 타원으로 바꿉니다.
넓게 224px 이고 160px 키인 generator's 미리보기 상자를 가져 가라:
| 값 | 수평 반경 | 수직 반경 | 모양 |
|---|---|---|---|
16px |
16px | 16px | 둥근 직사각형, 원형 모서리 |
50% |
112px(224개 중 50%) | 80px(160의 50%) | 타원 |
25% |
56px | 40px | 둥근 직사각형, 타원형 모서리 |
999px |
999px, 80px로 확장 | 999px, 80px로 확장 | 둥근 끝을 가진 알약 |
다른 두 단위는 일단 해결되면 픽셀처럼 동작합니다. em 는 element's 자신의 글꼴 크기와 상대적입니다 rem 루트 글꼴 크기에, 그래서 1rem 는 기본 브라우저 설정으로 16px 입니다. 사용하기 em 또는 rem 모서리는 텍스트 크기에 따라 확장되며 레이블에 따라 커지는 버튼과 태그에 적합합니다.
생성기에서 슬라이더는 px 의 경우 0 에서 200 까지,%의 경우 0 에서 50 까지,em 과 rem 의 경우 0 에서 10 까지 전체 숫자 단계로 실행됩니다. 단위를 전환하면 숫자가 유지되고 단위가 교환되므로 16px 는 변환된 값이 아닌 16%가 됩니다.
큰 경계 반경이 더 이상 둥글게 되지 않는 이유는 무엇입니까?
사양에서는 코너 커브가 겹치는 것을 허용하지 않기 때문입니다. 한 쪽의 반지름이 더해져 그 side's 길이보다 더 커지면 브라우저는 요소가 맞을 때까지 요소의 모든 반지름을 동일한 요소로 축소합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 코너 오버랩 규칙 이렇게 작동합니다. 네 변 각각에 대해 side's 길이를 닿는 두 반지름의 합으로 나눕니다. 그 비율 중 가장 작은 것을 f 라고 부르세요. f 가 1 보다 작으면 모든 반지름에 f 를 곱합니다.
에 대한 계산은 다음과 같습니다 border-radius: 999px 224 by 160 미리보기 상자:
top and bottom sides: 224 / (999 + 999) = 0.1121
left and right sides: 160 / (999 + 999) = 0.0801
f = min(0.1121, 0.0801) = 0.0801
every radius: 999 × 0.0801 ≈ 80px
각 모서리는 80px 반경, 정확히 160px 높이의 절반으로 끝나므로 짧은 끝은 완벽한 반원이됩니다. 200px에서도 같은 일이 일어나고 픽셀 슬라이더의 상단: f는 160 / 400 = 0.4 이고 200 × 0.4 는 다시 80px입니다. 짧은 쪽의 절반을 지나면 픽셀 반경은 무엇이든 변경하는 것을 멈 춥니 다.
두 가지 실용적인 결과가 이어집니다. 알약 버튼은 매우 큰 픽셀 값을 사용할 수 있으며 모든 너비에서 알약을 유지합니다. 그리고 스케일링은 네 모서리 모두에 비례하기 때문에 단일 대형 모서리도 다른 모서리를 축소합니다. 왼쪽 상단을 999px 로 설정하고 나머지는 20px 로 두면 20px 모서리가 함께 축소됩니다.
경계 반경으로 일반적인 모양을 어떻게 만들 수 있나요?
인터페이스에서 대부분의 둥근 모양은 몇 가지 레시피에서 나옵니다. 생성기에는 일반적인 레시피에 대한 사전 설정이 있습니다.
| 모양 | CSS | 노트 |
|---|---|---|
| 날카로운 | border-radius: 0px; |
대부분의 요소에 대한 기본값입니다 |
| 미묘한 | border-radius: 6px; |
입력, 작은 버튼 |
| 카드 | border-radius: 12px; |
패널 및 카드 |
| 둥글게 된 | border-radius: 16px; |
생성기's 시작 값 |
| 알약 | border-radius: 999px; |
오버랩 스케일링을 통해 모든 너비에서 작동합니다 |
| 서클 | border-radius: 50%; |
동일한 너비와 높이가 필요합니다 |
| 잎 | border-radius: 0px 24px; |
두 개의 반대쪽 모서리가 둥글게 처리되었습니다 |
| 얼룩 | border-radius: 60% 40%; |
불평등한 비율의 유기적 형태 |
| 말풍선 | border-radius: 16px 16px 16px 0px; |
스피커 근처의 날카로운 모서리 |
| 탭 | border-radius: 8px 8px 0px 0px; |
둥근 정상, 편평한 바닥 |
서클. 세트 50% 가로와 세로가 같은 원소에. 아바타의 경우,추가 aspect-ratio: 1 그리고 object-fit: cover 정사각형이 아닌 사진이 타원으로 늘어나지 않도록 이미지에 표시합니다.
알약. 보다는 큰 픽셀 값을 사용하십시오 50%. 넓은 단추에, 50% 수평 반경이 너비의 절반이기 때문에 끝이 뾰족해 보이는 타원을 생성합니다. 999px 대신 높이의 절반으로 조정되어 둥근 끝을 제공합니다.
얼룩. 사전 설정 60% 40% 왼쪽 위와 오른쪽 아래를 60%로 설정하고 나머지 두 개는 40%로 설정합니다. 미리보기 상자에서 위쪽 가장자리를 따라 있는 수평 반경은 134,4px 와 89,6px 로 합산하면 정확히 224px 가 되므로 스케일링이 발생하지 않으며 두 곡선이 만나는 사이에 직선 가장자리가 남지 않습니다. 사전 설정은 슬라이더 범위를 지나갈 수 있습니다: Blob 은 60%를 사용하고 Pill 은 999px 를 사용하며 출력은 슬라이더를 이동할 때까지 해당 값을 유지합니다.
말풍선과 탭. 두 도형 모두 일치하는 대각선 쌍이 없으므로 둘 다 네 가지 값이 모두 필요합니다. 생성기에서 모서리를 개별적으로 설정하면 더 짧은 형태가 존재하지 않음을 확인합니다.
경계 반경의 슬래시 구문은 무엇입니까?
슬래시는 수평 반경과 수직 반경을 분리하므로 각 모서리는 직접 선택한 크기의 비원형 타원이 될 수 있습니다.
/* horizontal radii / vertical radii */
.lens {
border-radius: 50% / 20%;
}
/* four horizontal, then four vertical */
.egg {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
슬래시의 각 측면에 있는 값은 일반 약칭과 동일한 일대일 규칙을 따릅니다. Toolz 생성기는 슬래시 구문을 작성하지 않습니다: 원,알약, 카드 및 얼룩을 덮는 모서리당 하나의 반경을 설정합니다. 계란 모양 및 사용자 정의 렌즈 형태의 경우 generator's 출력에서 시작하여 슬래시 부분을 손으로 추가합니다.
왜 둥근 모서리가 표시되지 않습니까?
언제 border-radius 아무것도 하지 않는 것 같습니다. 원인은 거의 항상 이들 중 하나입니다.
| 증상 | 원인 | 고치다 |
|---|---|---|
| 이미지나 어린이가 모서리를 찌릅니다 | 어린이는 기본적으로 클립되지 않습니다 | 추가 overflow: hidden 둥근 부모에게, 또는 아이에게도 둥글게 |
| 눈에 보이는 변화가 전혀 없습니다 | 요소에는 배경, 테두리 또는 그림자가 없습니다 | 배경색이나 테두리를 주어 모양이 보이도록 합니다 |
| 테이블 모서리는 정사각형으로 유지됩니다 | border-collapse: collapse 테이블 위에 |
사용 border-collapse: separate 와 함께 border-spacing: 0또는 포장지를 둥글게 만듭니다 |
| 원은 타원형처럼 보입니다 | 너비와 높이가 다릅니다 | 동일한 치수를 설정하거나 aspect-ratio: 1 |
| 알약 끝이 뾰족합니다 | 사용하여 50% 넓은 요소에 |
와 같이 큰 px 값을 사용합니다 999px |
| 반지름이 증가하기를 멈춥니다 | 오버랩 스케일링 | 예상되는; 반경은 짧은 쪽의 절반으로 제한됩니다 |
| 내부 요소 모서리가 더 두꺼워 보입니다 | 내부 반경은 패딩 내부의 외부 반경과 같습니다 | 패딩을 뺀 내부 반경을 외부 반경으로 설정합니다 |
마지막은 미묘하다. 와 함께 카드 border-radius: 16px 그리고 padding: 8px 같은 16px 반지름의 이미지를 포함하면 고르지 않게 보입니다. 왜냐하면 내부 곡선이 더 단단해야 하기 때문입니다. 외부 곡선을 따르는 내부 반지름은 16 빼기 8 이므로 8px 입니다.
경계 반경은 그림자 및 그라데이션과 어떻게 결합됩니까?
둥근 모서리는 거의 혼자 배송되지 않습니다. 카드는 일반적으로 그림자와 종종 그라데이션 배경을 가지며 둘 다 자동으로 둥근 모양을 따릅니다.
box-shadow 둥근 테두리 상자를 추적하므로 12px 카드 아래의 부드러운 그림자는 추가 작업없이 12px 둥근 모서리를 갖습니다. The 상자 그림자 발전기 둥근 요소의 그림자를 미리 봅니다 박스 그림자 가이드 그 뒤에 오프셋, 흐리게 및 확산 값을 설명합니다.
그라데이션을 포함한 배경도 둥근 모양으로 잘립니다. 채우기를 디자인하려면 다음을 사용하십시오 CSS 그라디언트 생성기; 그만큼 CSS 그라디언트 가이드 구문을 통해 걷습니다. 코너 크기가 고정된 상태를 유지하는 대신 뷰포트로 확장되어야 하는 경우,the CSS 클램프 발생기 빌드 a clamp() 반경으로 사용할 수 있는 값, 예를 들어 전화기의 경우 8px, 와이드 스크린의 경우 20px인 카드입니다.
발전기를 사용하여 단계별로
- 사전 설정 선택 카드, 알약, 원 또는 얼룩과 같은 또는 기본 16px 모서리에서 시작하십시오.
- 코너 조정. 코너 토글은 기본값이 독립으로 되어 있으며,각 슬라이더는 자신의 코너만 움직입니다. 링크드 로 전환하여 4 개를 모두 함께 움직입니다.
- 유닛 선택: px, %, em 또는 rem.
- 미리보기를 확인하세요. 그라데이션 상자는 드래그할 때 업데이트되며, 큰 값에 대한 오버랩 스케일링도 포함됩니다.
- CSS 를 복사합니다. CSS 복사 버튼은 전체를 복사합니다
border-radius:가장 짧은 형태의 선언.
모든 것이 클라이언트 측에서 실행됩니다: 미리보기와 코드는 브라우저에서 JavaScript 에 의해 생성되고,아무것도 업로드되지 않으며,페이지가 로드된 후에도 오프라인으로 계속 작동합니다. 준비가 되면 경계-반경 생성기를 엽니다를 설정하고 모서리를 설정한 다음 선언문을 스타일시트에 바로 붙여넣습니다.
