CSS hypot() 함수

정의와 사용법

CSS의 hypot() 함수는 그 파라미터의 제곱之和의 제곱근을 반환합니다.

반환 값은 공식 sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn)를 통해 계산됩니다.

hypot() 함수는 단위가 있는数值를 받아들이지만, 모든 값의 단위는 같아야 합니다.

예제

사용 hypot() 요소의 너비를 설정하십시오:

div.a {
  width: hypot(80px); /* 80px */
}
div.b {
  width: hypot(40px, 80px); /* 89,44px */
}
div.c {
  width: hypot(40px, 80px, 100px); /* 134,16 */
}
div.d {
  width: hypot(40px, 80px, 100px, 120px); /* 180 */
}
div.e {
  width: hypot(10%, 20%, 40%); /* 45,82% */
}

직접 시도해 보세요

CSS 문법

hypot(x1, x2, x3, ...)
값 설명
x1, x2, x3, ... 必需. 하나 또는 여러 가지 값으로 구분된 값.

기술 세부 사항

버전: CSS4

브라우저 지원

표에서의 숫자는 해당 함수를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
120 120 118 15.4 106

관련 페이지

참조:CSS acos() 함수

참조:CSS asin() 함수

참조:CSS atan2() 함수

참조:CSS calc() 함수

참조:CSS cos() 함수

참조:CSS exp() 함수

참조:CSS hypot() 함수

참조:CSS log() 함수

참조:CSS mod() 함수

참조:CSS pow() 함수

참조:CSS sin() 함수

참조:CSS sqrt() 함수

참조:CSS tan() 함수