CSS function round

Опис

round() - функція в CSS, яка використовується для округлення числових значень. Ця функція дозволяє змінювати вигляд елементів на веб-сайті шляхом округлення чисел до найближчого цілого або до певної кількості десяткових знаків.

Округлення до найближчого цілого числа

Наприклад, якщо вам потрібно округлити число 3.7, ви можете скористатись функцією round(3.7), і вона поверне значення 4. Аналогічно, для числа -2.1, ви можете викликати функцію round(-2.1), і вона поверне -2. Це дозволяє легко змінювати вигляд елементів на основі округлених значень.

Округлення до певної кількості десяткових знаків

Крім того, функція round() може бути використана для округлення чисел до певної кількості десяткових знаків. Наприклад, якщо у вас є число 2.3456, і ви хочете залишити тільки два десяткових знаки, ви можете скористатись функцією round(2.3456, 2), щоб отримати значення 2.35. У цьому випадку, функція збереже лише два знаки після десяткової коми.

Приклад використання функції round()

Давайте розглянемо приклад, як функція round() може бути корисною для веб-розробки. Припустимо, у нас є прямокутний блок з властивостями:

.block {
  width: 150px;
  height: 80px;
  border-radius: round(20.5px);
  background-color: #3498db;
}

В даному прикладі, ми використовуємо функцію round() для округлення значення 20.5px, що дозволяє зробити кутові радіуси блоку більш округлими. Це змінює вигляд елементу, надаючи йому більш привабливий та згладжений вигляд.

правити

Порада

Використовуйте функцію round() там, де точне округлення числових значень є важливим, наприклад, для створення точних розмірів або розташування елементів.

автор: Bond правити

Нотатка

Пам'ятайте, що функція round() застосовує стандартне правило округлення і не залежить від кількості десяткових знаків. Наприклад, round(1.5) поверне 2, незалежно від наявності десяткових знаків.

автор: Bond правити

Нотатка

Функція round() не приймає величини з одиницями виміру (наприклад, пікселі, відсотки і т.д.), оскільки вона використовується для округлення числових значень без прив'язки до конкретної одиниці виміру.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

round(<number>);

Функція round може отримувати єдине значення:

<number>

Приймає лише числові значення (цілі числа, десяткові числа)

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	125	118	15.4	111	125	—

Підтримка: мобільні переглядачі

Переглядач
	125	125	118	15.4

Приклади

+ запропонувати свій приклад у пісочниці