CSS hypot() funktion

Definition och användning

CSS hypot() Funktionen returnerar kvadraten av summan av kvadraterna av dess parametrar.

Returvärdet beräknas med formeln sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() Funktionen accepterar värden med enheter, men alla värden måste ha samma enhet.

Exempel

Använd hypot() Ställ in elementets bredd:

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

Prova själv

CSS syntax

hypot(x1, x2, x3, ...)
Värde Beskrivning
x1, x2, x3, ... Obligatorisk. En eller flera värden separerade med kommatecken.

Tekniska detaljer

Version: CSS4

Webbläsarstöd

Talen i tabellen representerar den första versionen av webbläsaren som fullständigt stöder denna funktion.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Relaterade sidor

Referens:CSS acos() funktion

Referens:CSS asin() funktion

Referens:CSS atan2() funktion

Referens:CSS calc() funktion

Referens:CSS cos() funktion

Referens:CSS exp() funktion

Referens:CSS hypot() funktion

Referens:CSS log() funktion

Referens:CSS mod() funktion

Referens:CSS pow() funktion

Referens:CSS sin() funktion

Referens:CSS sqrt() funktion

Referens:CSS tan() funktion