css.in.ua
Підтримати

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() там, де точне округлення числових значень є важливим, наприклад, для створення точних розмірів або розташування елементів.
Нотатка:

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

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

Синтаксис

round(<number>);
<number>

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

Переглядачі

Переглядач

15.4
Переглядач

15.4

Мобільних переглядачів ще не додано.

Приклади


Наведіть курсор на елемент, щоб побачити зміну його розмірів.

Використання функції round() для округлення розмірів елемента.

Спільнота

Зв'язок