CSS의 조건부 테두리 반경

Ahmad Shadeed가 문서화하고 Facebook의 코드베이스에서 시작된이 CSS 트릭은 뷰포트에 비해 너비를 기준으로 요소의 경계-라디우스를 동적으로 조정합니다. 마법은 한 줄의 CSS에서 발생합니다.

 .card {
  Border -Radius : max (0px, min (8px, calc ((100vw -4px -100%) * 9999));
} 

핵심 논리는 100vw (뷰포트 너비)를 100% (요소 너비)와 비교합니다. 일반적으로 border-radius 는 8px입니다. 그러나 요소의 너비가 뷰포트 너비 (약 4px의 공차 내에서)에 접근하면 계산은 음수 값을 초래합니다. 큰 승수 (9999)와 결합 된 max(0px, ...) 및 min(8px, ...) 함수는 0px와 8px 테두리-라디우스 사이의 선명한 토글을 보장하여 중간 값을 제거합니다. 승수 (9999)를 제거하면 요소의 너비가 뷰포트 너비에 가까워지면서 점진적인 전환이 나타납니다.

이 방법은 @media Queries에 대한 장점을 제공합니다.

• 컨테이너 인식 : 고정 뷰포트 너비에 의존하는 미디어 쿼리와 달리이 기술은 컨테이너 쿼리의 형태 역할을하는 뷰포트에 비해 요소의 너비에 동적으로 반응합니다. 카드의 크기를 미리 알 필요는 없습니다. 미디어 쿼리는 사전 정의 된 너비에 따라 다릅니다.

• 다목적 성 : 이 "Fab Four"기술 (때로는 때때로 불리는) 기술은 이메일 개발 및 레이아웃 응답성에 대한 정확한 제어가 중요한 다른 상황에 특히 유용합니다.

개발자는 미디어 쿼리와 비교하여 우수한 적응성을 강조하므로 반응 형 디자인 시나리오를위한 강력한 도구입니다.

위 내용은 CSS의 조건부 테두리 반경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!