CSS sqrt() — квадратний корінь числа

Опис

правити

Загальний опис

правити

Порада

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

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

Порада

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

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

Порада

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

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

Нотатка

Важливо пам'ятати, що функція sqrt() може бути використана лише для обчислення квадратного кореня числа, і не може виконувати інші математичні операції. Крім того, функція поверне значення NaN (Not a Number), якщо вхідне число є від'ємним, оскільки квадратний корінь від від'ємного числа не є дійсним числом.

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

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

Синтаксис

sqrt(number);

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

<number>

Додатні або від'ємні числові значення.

автор: Bond

правити

Переглядачі

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

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

Переглядач
	120	118	15.4	106	120	—

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

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

Приклади

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

<div id="description">
  <h2>Приклад</h2>
  <p>Елемент з обчисленою шириною за допомогою функції sqrt():</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

#description {
  font-style: italic;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 50px;
  padding: 12px 16px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: calc(100px * sqrt(9));
  height: 100px;
  background: blue;
}

<div id="description">
  <h2>sqrt(): корінь від числа, одиниця — множенням</h2>
  <p>sqrt() повертає число. Щоб отримати довжину, результат множать на 1px.</p>
</div>

<div id="result">
  <div class="row">
    <figure><div class="sq s1"></div><figcaption>площа 1</figcaption></figure>
    <figure><div class="sq s2"></div><figcaption>площа 2</figcaption></figure>
    <figure><div class="sq s4"></div><figcaption>площа 4</figcaption></figure>
    <figure><div class="sq s8"></div><figcaption>площа 8</figcaption></figure>
  </div>

  <p class="label">calc(sqrt(16) * 40px) — правильно</p>
  <div class="bar right">160px</div>

  <p class="label">calc(sqrt(16px) * 40px) — невалідно, лишився резерв</p>
  <div class="bar wrong">60px</div>
</div>

.row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

figure {
  margin: 0;
  font: 13px/1.4 system-ui, sans-serif;
  text-align: center;
}

figcaption {
  margin-top: 6px;
  color: #495057;
}

.sq {
  background: #1864ab;
}

/* Сторона = корінь із площі, помножений на базову одиницю */
.s1 { width: calc(sqrt(1) * 34px); height: calc(sqrt(1) * 34px); }
.s2 { width: calc(sqrt(2) * 34px); height: calc(sqrt(2) * 34px); }
.s4 { width: calc(sqrt(4) * 34px); height: calc(sqrt(4) * 34px); }
.s8 { width: calc(sqrt(8) * 34px); height: calc(sqrt(8) * 34px); }

.label {
  margin: 18px 0 4px;
  font-size: 13px;
  color: #495057;
}

.bar {
  box-sizing: border-box;
  height: 28px;
  padding-left: 8px;
  border-radius: 0 4px 4px 0;
  color: #fff;
  font: 13px/28px system-ui, sans-serif;
}

.right {
  width: 60px;
  width: calc(sqrt(16) * 40px);
  background: #2f9e44;
}

/* Корінь із пікселів — помилка типу, тому діє резервний рядок вище */
.wrong {
  width: 60px;
  width: calc(sqrt(16px) * 40px);
  background: #c92a2a;
}