Funkcja hypot() CSS

Definicja i zastosowanie

CSS hypot() Funkcja zwraca kwadratową sumę parametrów.

Wartość zwracana jest obliczana przez formułę sqrt(x1*x1 + x2*x2 + x3*x3 .... xn*xn).

hypot() Funkcja akceptuje wartości z jednostkami, ale wszystkie wartości muszą mieć ten sam jednostkę.

Przykład

Użyj hypot() Ustaw szerokość elementu:

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% */
}

Spróbuj sam

Gramatyka CSS

hypot(x1, x2, x3, ...)
Wartość Opis
x1, x2, x3, ... Wymagane. Jedna lub kilka wartości oddzielonych przecinkami.

Szczegóły techniczne

Wersja: CSS4

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Strony związane

Referencje:Funkcja acos() CSS

Referencje:Funkcja asin() CSS

Referencje:Funkcja atan2() CSS

Referencje:Funkcja calc() CSS

Referencje:Funkcja cos() CSS

Referencje:Funkcja exp() CSS

Referencje:Funkcja hypot() CSS

Referencje:Funkcja log() CSS

Referencje:Funkcja mod() CSS

Referencje:Funkcja pow() CSS

Referencje:Funkcja sin() w CSS

Referencje:Funkcja sqrt() w CSS

Referencje:Funkcja tan() w CSS