CSS3 둥근 모서리 속성의 각 값은 무엇을 나타냅니까?

CSS3에서 둥근 모서리 속성 "border-radius"는 1~4개의 속성값을 가집니다. 4개의 속성값이 설정되면 속성값은 왼쪽 상단, 오른쪽 상단의 둥근 모서리 속성값을 나타냅니다. 모서리, 오른쪽 아래 모서리 및 왼쪽 아래 모서리를 차례로 사용하는 경우 구문은 "경계 반경: 왼쪽 위 반올림 값, 오른쪽 위 반올림 값, 오른쪽 아래 반올림 값, 왼쪽 아래 반올림 값"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 둥근 모서리 속성의 각 값은 무엇을 나타냅니까?

CSS3 border-radius - 각 둥근 모서리를 지정합니다.

border-radius 속성은 최대 4개의 테두리 -*- 반경 속성을 지정할 수 있는 복합 속성입니다. border-radius 속성에 하나의 값만 지정하면 둥근 모서리 4개가 생성됩니다.

그러나 네 모서리를 하나씩 지정하려면 다음 규칙을 사용할 수 있습니다.

· 4개 값: 첫 번째 값은 왼쪽 위 모서리, 두 번째 값은 오른쪽 위 모서리, 세 번째 값은 오른쪽 위 모서리입니다. 값은 오른쪽 하단 모서리이고, 네 번째 값은 왼쪽 하단 모서리입니다.

· 세 가지 값: 첫 번째 값은 왼쪽 상단, 두 번째 값은 오른쪽 상단 및 왼쪽 하단, 세 번째 값은 오른쪽 하단

· 두 값: 첫 번째 값은 왼쪽 상단 모서리와 오른쪽 하단 모서리, 두 번째 값은 오른쪽 상단 모서리와 왼쪽 하단 모서리입니다

· 하나의 값: 네 개의 둥근 모서리는 동일한 값을 갖습니다

각 반경에 대한 4개의 값의 순서는 다음과 같습니다. : 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리. 왼쪽 아래 모서리를 생략하면 오른쪽 위 모서리도 동일합니다. 오른쪽 아래 모서리를 생략하면 왼쪽 위 모서리도 동일합니다. 오른쪽 위 모서리가 생략되면 왼쪽 위 모서리도 동일합니다.

예제 1

border-radius:2em;

은 다음과 동일합니다.

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

예제 2

border-radius: 2em 1em 4em / 0.5em 3em;

는 다음과 동일합니다.

border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

(동영상 공유 학습:

css 동영상 튜토리얼

)

위 내용은 CSS3 둥근 모서리 속성의 각 값은 무엇을 나타냅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!