English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
border-bottom-right-radius는 CSS에서 요소의 오른쪽 아래 모서리를 둥글게 만드는 데 사용됩니다. 이 원형은 원형이나 타원형일 수 있으며, 값이 0이면 일반적인 직각 모서리가 됩니다. 배경이 이미지이든 색상이든, 이 속성은 이 속성에 의해 모서리의 형태에 영향을 미칩니다.
아래 표는 이 속성의 사용 설명과 버전 기록, 그리고 이 속성이 JavaScript 스크립트에서 사용하는 문법입니다.
| 기본 값: | 0 |
|---|---|
| 적용 대상: | 모든 요소 |
| thừa kế: | 없음 |
| 애니메이션 가능: | 입니다.참조하십시오. 애니메이션 속성。 |
| 버전: | CSS3의 새 기능 |
| JavaScript 문법: | object object.style.borderBottomRightRadius="8px" |
주의:border-bottom-right-radius는 테두리를 정의하지 않거나 값이 none로 설정되어도, 요소의 배경이 둥글게 됩니다.
이 속성의 문법은 다음과 같습니다:
border-bottom-right-radius: [ length | percentage ]1 또는 2 values | initial | inherit
이 약칭은 하나나 두 개의 공백으로 구분된 값을 사용할 수 있습니다。
선택 사항의 두 번째 길이 값은 오른쪽 상단 모서리의 수직 반지름을 정의하며, 따라서 모서리의 형태는 네분원 타원입니다.
두 번째 길이를 생략하거나 두 번째 길이와 같다면, 모서리의 형태는 네분원입니다. 어떤 길이가 0이면 모서리는 정方形이 아니라 둥글게 됩니다.
아래 예제는 border를 사용하는 방법을 설명합니다-bottom-right-radius 속성.
div {
border: 2px solid #f08080;
border-bottom-right-radius: 20px;
}테스트해보기‹/›아래 표는 이 속성의 값을 설명합니다。
| 값 | 설명 |
|---|---|
| length | 길이 값의 단위는 px, pt, cm, em 등이 될 수 있지만 음수 값을 사용할 수 없습니다。 |
| percentage | 반지름의 크기는 백분율로 표현됩니다. 두 가지 값이 있는 경우, 첫 번째 값은 요소 상자의 너비에 대한 백분율로 계산됩니다(즉, 수평 반지름), 두 번째 값은 요소 상자의 높이에 대한 백분율로 계산됩니다(즉, 수직 반지름) . 음수 값을 사용할 수 없습니다。 |
| initial | 이 속성을 기본 값으로 설정합니다。 |
| inherit | 지정된 경우, 관련 요소는 부모 요소의 border를 사용합니다-bottom-right-radius 속성의 계산 값。 |
border-bottom-right-radius 속성의 브라우저 호환성을 보여주는 표에서의 숫자는 해당 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다. 모든 주요 브라우저는 이 속성을 지원합니다。
|
경고: Internet Explorer 8및 이전 버전에서 해당 border를 지원하지 않습니다-bottom-right-radius 속성은 IE9및 이후 버전에서 지원됩니다。
튜토리얼 참조:CSS Border，CSS3 Border。
관련 속성:border-radius，border-bottom-left-radius，border-top-left-radius，border-top-right-radius。