ฟังก์ชัน round() ของ CSS

การระบุและการใช้งาน

CSS round() ฟังก์ชันจะทำการหยุดตัวเลขให้เกิดเป็นเลขเต็มที่ใกล้เคียงสุดกับระยะเวลาที่ต้องการทำการหยุดเล็กน้อยตามที่ระบุ

ตัวอย่าง

ใช้ round() จากที่ระบุแล้ว ทำการหยุดตัวเลขให้เกิดเป็นเลขเต็มที่ใกล้เคียงสุดกับระยะเวลาที่ต้องการทำการหยุดเล็กน้อย

div.box2 {
  height: round(up, 105px, 25px);
}
div.box3 {
  height: round(down, 120px, 25px;
}
div.box4 {
  height: round(to-zero, 115px, 25px);
}

ลองทดลองด้วยตัวเอง

ภาษา CSS

round(rounding-strategy, valuetoround, roundinginterval)
ค่า รายละเอียด
rounding-strategy

เลือกตัวเลือกตามความต้องการ สามารถเป็นค่าดังนี้:

  • nearest: ค่าปริยาย ทำการหยุดค่า valuetoround ให้เกิดเป็นเลขเต็มที่ใกล้เคียงสุดกับ roundinginterval
  • up: ทำการหยุดค่า valuetoround ไปทางด้านบนให้เกิดเป็นเลขเต็มที่ใกล้เคียงสุดกับ roundinginterval
  • down: ทำการหยุดค่า valuetoround ไปทางด้านล่างให้เกิดเป็นเลขเต็มที่ใกล้เคียงสุดกับ roundinginterval
  • to-zero: ทำการหยุดค่า valuetoround ให้เกิดเป็นเลขเต็มที่ใกล้เคียงสุดกับ roundinginterval และใกล้เคียงกับศูนย์
valuetoround จำเป็น ค่าที่ต้องการทำการหยุด (ตัวเลข, อัตราส่วน, ขนาดหรือเส้นทางการคำนวณ)
roundinginterval จำเป็น ระยะเวลาที่ต้องการทำการหยุดเล็กน้อย (ตัวเลข, อัตราส่วน, ขนาดหรือเส้นทางการคำนวณ)

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

รุ่น: CSS4

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

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

Chrome Edge Firefox Safari Opera
125 125 118 15.4 111

หน้าที่เกี่ยวข้อง

อ้างอิง:ฟังก์ชัน acos() ของ CSS

อ้างอิง:ฟังก์ชัน asin() ของ CSS

อ้างอิง:ฟังก์ชัน atan() ของ CSS

อ้างอิง:ฟังก์ชัน atan2() ของ CSS

อ้างอิง:ฟังก์ชัน calc() ของ CSS

อ้างอิง:ฟังก์ชัน cos() ของ CSS

อ้างอิง:ฟังก์ชัน exp() ของ CSS

อ้างอิง:ฟังก์ชัน hypot() ของ CSS

อ้างอิง:CSS log() ฟังก์ชัน

อ้างอิง:CSS mod() ฟังก์ชัน

อ้างอิง:CSS pow() ฟังก์ชัน