테두리 반경을 이용한 도형 디자인

Border Radius 속성을 사용하여 둥근 모서리부터 완벽한 원까지 원형 모양과 그 사이의 모든 모양을 만듭니다.

요소의 테두리와 테두리 반경을 조정하여 다양한 모양을 형성하는 기능이 있습니다.

둥근 상자

1px부터 시작하여 Radius 속성까지 증가하는 값을 활용하면 둥근 사각형이 됩니다.

 

반경의 픽셀 값을 증가시키면 점차적으로 캡슐과 같은 모양이 됩니다.

캡슐/알약 모양

캡슐 모양의 반경은 요소의 높이 또는 너비 값(픽셀)의 절반입니다. 값이 더 증가해도 모양은 변경되지 않습니다.

 

타원

반경에 백분율 값을 사용할 수 있습니다. 50%의 반경은 타원의 부드러운 렌더링을 나타냅니다. 값이 클수록 모양에 영향을 주지 않습니다.

 

타원의 모양은 요소의 너비에 직접 연결됩니다. 타원의 종횡비는 너비와 높이의 비율에 따라 결정됩니다.

원은 본질적으로 너비와 높이가 같은 타원입니다. 원을 만들려면 너비와 높이 측정이 동일한 요소에 반경 50%를 적용하세요.

 

동적 코너

다른 요소와 마찬가지로 다양한 상태에 대해 테두리 반경을 사용자 정의할 수 있습니다.

  1. 액세스 호버 진술하고 소개하다 테두리 반경
  2. 기본값으로 전환 없음 상태를 확인하고 적용하세요. 이행 ~로 테두리 반경 재산. 기간 및 완화 조정 또는 유지

요소의 상태 및 전환에 대한 추가 정보 살펴보기.

 
이완 막
Ewan Mak의 최신 게시물 (모두 보기)