CSS round() — округлення до кратного значення
Опис
автор: Bond
Загальний опис
автор: NagarD
- Порада
-
Використовуйте функцію
автор: Bondround()там, де точне округлення числових значень є важливим, наприклад, для створення точних розмірів або розташування елементів. - Нотатка
-
Пам'ятайте, що функція
автор: Bondround()застосовує стандартне правило округлення і не залежить від кількості десяткових знаків. Наприклад, round(1.5) поверне 2, незалежно від наявності десяткових знаків. - Нотатка
-
Функція
автор: Bondround()не приймає величини з одиницями виміру (наприклад, пікселі, відсотки і т.д.), оскільки вона використовується для округлення числових значень без прив'язки до конкретної одиниці виміру.
Синтаксис
round(<number>);Функція round може отримувати єдине значення:
-
<number> -
Приймає лише числові значення (цілі числа, десяткові числа)
автор: Bond
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 125 | 118 | 15.4 | 111 | 125 | — |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 125 | 125 | 118 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Наведіть курсор на елемент, щоб побачити зміну його розмірів.
HTML
<div id="description">
<h2>Приклад 1: зміна розмірів</h2>
<p>Наведіть курсор на елемент, щоб побачити зміну його розмірів.</p>
</div>
<div id="result">
<div class="box"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.box {
width: 100px;
height: 100px;
background-color: #ff6f61;
transition: width 0.3s, height 0.3s;
}
.box:hover {
width: round(150.6px);
height: round(150.6px);
}Використання функції round() для округлення розмірів елемента.
HTML
<div id="description">
<h2>Приклад 2</h2>
<p>Використання функції round() для округлення розмірів елемента.</p>
</div>
<div id="result">
<div class="box"></div>
<div class="box with-round"></div>
</div>CSS
#description {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial, sans-serif;
}
#result {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.box {
width: 200px;
height: 200px;
background-color: #ff6f61;
margin-right: 20px;
}
.with-round {
width: round(150.6px);
height: round(150.6px);
background-color: #5cb85c;
}Обидва ряди починаються з тих самих ширин — 137px, 98px і 165px. Верхній лишає їх як є, нижній пропускає через round(ширина, 40px), і смуги закінчуються рівно на лініях сітки. Остання смуга показує стратегію up. Рядок зі звичайною шириною стоїть перед round() як запасний — на випадок старого браузера.
HTML
<div id="description">
<h2>round(): прив'язка до сітки в 40px</h2>
<p>Сірі лінії — сітка з кроком 40px. Верхні смуги закінчуються де завгодно, нижні — рівно на лінії.</p>
</div>
<div id="result">
<p class="label">Як є</p>
<div class="grid">
<div class="bar raw-a">137px</div>
<div class="bar raw-b">98px</div>
<div class="bar raw-c">165px</div>
</div>
<p class="label">round(значення, 40px)</p>
<div class="grid">
<div class="bar snap-a">120px</div>
<div class="bar snap-b">80px</div>
<div class="bar snap-c">160px</div>
</div>
<p class="label">round(up, 137px, 40px)</p>
<div class="grid">
<div class="bar snap-up">160px</div>
</div>
</div>CSS
#result {
max-width: 100%;
}
.label {
margin: 14px 0 4px;
font-size: 13px;
color: #495057;
}
.grid {
padding: 6px 0;
background-image: repeating-linear-gradient(to right, #ced4da 0 1px, transparent 1px 40px);
}
.bar {
box-sizing: border-box;
height: 26px;
margin: 4px 0;
padding-left: 8px;
border-radius: 0 4px 4px 0;
background: #1864ab;
color: #fff;
font: 13px/26px system-ui, sans-serif;
}
/* Перший рядок — запасний, для браузерів без round(); другий його перекриває */
.raw-a { width: 137px; }
.raw-b { width: 98px; }
.raw-c { width: 165px; }
.snap-a { width: 137px; width: round(137px, 40px); }
.snap-b { width: 98px; width: round(98px, 40px); }
.snap-c { width: 165px; width: round(165px, 40px); }
.snap-up {
width: 137px;
width: round(up, 137px, 40px);
background: #2f9e44;
}Коментарі
Коментарів ще немає — будьте першим!