CSS hypot() funktion

Definisjon og bruk

CSS' hypot() Funksjonen returnerer kvadratet av summen av kvadratene av parameterne.

Returneringsverdien beregnes ved hjelp av formelen sqrt(x1*x1 + x2*x2 + x3*x3 + ... + xn*xn).

hypot() Funksjonen tar imot verdier med enhet, men enhetene må være ens for alle verdier.

Eksempel

Bruk hypot() Sett elementets bredde:

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

Prøv det selv

CSS syntaks

hypot(x1, x2, x3, ...)
Verdi Beskrivelse
x1, x2, x3, ... Obligatorisk. En eller flere verdier adskilt med komma.

Teknisk detalj

Versjon: CSS4

Nettleserstøtte

Tallene i tabellen viser den første versjonen av nettleseren som fullt ut støtter denne funksjonen.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Relaterede sider

Referencer:CSS acos() funktion

Referencer:CSS asin() funktion

Referencer:CSS atan2() funktion

Referencer:CSS calc() funktion

Referencer:CSS cos() funktion

Referencer:CSS exp() funktion

Referencer:CSS hypot() funktion

Referencer:CSS log() funktion

Referencer:CSS mod() funktion

Referencer:CSS pow() funktion

Referencer:CSS sin() funktion

Referencer:CSS sqrt() funktion

Referencer:CSS tan() funktion