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, ...)

รายละเอียดเทคนิค

การสนับสนุนเบราเซอร์

ตัวเลขในตารางแสดงการเวอร์ชั่นของเบราเซอร์ที่สนับสนุนฟังก์ชันนี้เต็มที่

เพิ่มเติม

อ้างอิง: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() 函数