border-radius
- 테두리 굴곡을 일곽적으로 설정
- border-radius 속성에 '/'가 붙으면 x축 y축으로 분리한다.
- 시계 방향으로 설정된다고 생각하면 된다.
비교
- border-radius : 테투리 굴곡을 일괄적으로 설정
- border-top-left-radius : 윗부분 왼쪽 모서리 굴곡 설정
- border-top-right-radius : 윗부분 오른쪽 모서리 굴곡 설정
- border-bottom-left-radius : 아랫부분 왼쪽 모서리 굴곡 설정
- border-bottom-right-radius : 아랫부분 오른쪽 모서리 굴곡 설정
문법
border-radius : 위쪽,오른쪽,아래쪽, 왼쪽;
/* 기본 다중 속성 */
border-radius: 10px; /* 위쪽,오른쪽,아래쪽,왼쪽 */
border-radius: 10px 11px; /* 위쪽,아래쪽 | 왼쪽,오른쪽 */
border-radius: 10px 11px 12px; /* 위쪽 | 왼쪽,오른쪽 | 아래쪽 */
border-radius: 10px 11px 12px 13px; /* 위쪽 | 오른쪽 | 아래쪽 | 왼쪽 */
/* 개별 속성 */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
/* 전역 속성 */
border-radius: inherit; /* 상속 */
border-radius: initial; /* 초기화 */
border-radius: revert; /* 원래대로 돌리기 */
border-radius: unset; /* 설정 해제 */예제 1
예제 2
cursor
- cursor : 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다.
이 외에는 참조링크 보면 된다.
참조링크
inherit
inherit
- 부모 요소로부터 해당 속성의 값을 그대로 상속받는다.
- 상속되는 속성의 경우, 재정의를 하지 않으면 부모의 요소 속성을 그대로 물려받는다.
노멀라이즈
노멀라이즈?
- 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애 다시 평범하게 만든다.
예제
