Hàm hypot() trong CSS

Định nghĩa và cách sử dụng

CSS của hypot() Hàm trả về bình phương của tổng bình phương của các tham số.

Giá trị trả về được tính toán qua công thức sqrt(x1*x1 + x2*x2 + x3*x3 .... xn*xn).

hypot() Hàm chấp nhận giá trị số có đơn vị, nhưng tất cả các giá trị phải có cùng đơn vị.

Mô hình

Sử dụng hypot() Đặt chiều rộng của phần tử:

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

Thử ngay

Cú pháp CSS

hypot(x1, x2, x3, ...)
Giá trị Mô tả
x1, x2, x3, ... Bắt buộc. Một hoặc nhiều giá trị phân隔 bởi dấu phẩy.

Chi tiết kỹ thuật

Phiên bản: CSS4

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ hàm này.

Chrome Edge Firefox Safari Opera
120 120 118 15.4 106

Trang liên quan

Tham khảo:Hàm acos() trong CSS

Tham khảo:Hàm asin() trong CSS

Tham khảo:Hàm atan2() trong CSS

Tham khảo:Hàm calc() trong CSS

Tham khảo:Hàm cos() trong CSS

Tham khảo:Hàm exp() trong CSS

Tham khảo:Hàm hypot() trong CSS

Tham khảo:Hàm log() trong CSS

Tham khảo:Hàm mod() trong CSS

Tham khảo:Hàm pow() trong CSS

Tham khảo:Hàm sin() trong CSS

Tham khảo:Hàm sqrt() trong CSS

Tham khảo:Hàm tan() trong CSS