CSS pow() — піднесення числа до степеня

Опис

Функція pow() в CSS призначена для обчислення значення числа, піднесеного до заданого степеня. Ця функція приймає два числових аргументи: number, яке представляє число, що підноситься до степеня, та exponent, яке визначає показник степеня.

Для обчислення значення числа, піднесеного до степеня, ви можете використовувати функцію pow() з поданням числових значень аргументів. Наприклад, pow(2, 3) обчислить 2 піднесене до степеня 3, що дорівнює 8.

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

.element {
  width: pow(2, 3);
}

У цьому прикладі значення ширини елемента буде обчислено як 2 піднесене до степеня 3, тобто 8, і встановлено на 8 пікселів.

.element {
  height: pow(5, -2);
}

В цьому прикладі значення висоти елемента буде обчислено як 5 піднесене до степеня -2, що дорівнює 0.04, і встановлено на 0.04 пікселів.

.element {
  font-size: pow(10, 0.5);
}

Тут значення розміру шрифту буде обчислено як корінь квадратний з 10, що дорівнює приблизно 3.16, і встановлено на 3.16 пікселів.

правити

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

правити

Порада

Зверніть увагу на типи даних, які використовуються в аргументах number та exponent. Вони повинні бути числовими значеннями, такими як числа або вирази, що повертають числа.

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

Порада

При використанні pow() ретельно перевіряйте правильність введення аргументів та виконуйте відповідні перевірки на коректність даних, щоб уникнути помилок.

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

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

Нотатка

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

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

Нотатка

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

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

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

Синтаксис

pow(number, exponent);

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

<number>

Обидва аргументи можуть бути числовими значеннями, включаючи позитивні, від'ємні та десяткові числа.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div class="container">
  <div id="description">
    <h2>Приклад 2: визначення ширини елемента за допомогою CSS-функції pow()</h2>
    <p>Цей приклад показує визначення ширини елемента за допомогою CSS-функції pow().</p>
  </div>
  <div id="result">
    <div class="box"></div>
    <div class="box resized"></div>
  </div>
</div>

#description {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: left;
  font-family: Arial, sans-serif;
  margin-bottom: 50px;
}

#description h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

#description p {
  font-size: 16px;
  margin-bottom: 0;
}

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

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
}

.box.resized {
  width: pow(200, 2);
}

<div class="container">
  <div id="description">
    <h2>Приклад 1: зміна елемента при наведенні курсору</h2>
    <p>Цей приклад ілюструє динамічну зміну елемента при наведенні курсору за допомогою CSS-функції pow().</p>
  </div>
  <div id="result">
    <div class="box"></div>
  </div>
</div>

#description {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: left;
  font-family: Arial, sans-serif;
  margin-bottom: 50px;
}

#description h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

#description p {
  font-size: 16px;
  margin-bottom: 0;
}

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

.box {
  width: 200px;
  height: 200px;
  background-color: blue;
  transition: background-color 0.3s;
}

.box:hover {
  background-color: rgba(255, 0, 0, pow(0.5, 2));
}

<p class="head">Ширина = calc(pow(2, n) * 12px) — кожна смуга вдвічі ширша:</p>
<div class="bar b0">pow(2, 0) = 1 → 12px</div>
<div class="bar b1">pow(2, 1) = 2 → 24px</div>
<div class="bar b2">pow(2, 2) = 4 → 48px</div>
<div class="bar b3">pow(2, 3) = 8 → 96px</div>
<div class="bar b4">pow(2, 4) = 16 → 192px</div>

<p class="head">Пастка — width: pow(2, 3) без calc і без одиниці:</p>
<div class="bar bad">оголошення відкинуто, ширина лишилась auto</div>

<p class="head">Типографська шкала: font-size = calc(pow(1.25, n) * 1rem)</p>
<p class="t0">pow(1.25, 0)</p>
<p class="t1">pow(1.25, 1)</p>
<p class="t2">pow(1.25, 2)</p>
<p class="t3">pow(1.25, 3)</p>

<p class="head">А в числових властивостях calc не потрібен — opacity: pow(0.7, n)</p>
<div class="row">
    <span class="chip c1">0.7</span>
    <span class="chip c2">0.49</span>
    <span class="chip c3">0.34</span>
    <span class="chip c4">0.24</span>
</div>

.head {
    margin: 18px 0 6px;
    color: #5a6472;
    font-size: .9em;
}

.bar {
    margin-bottom: 4px;
    padding: 3px 6px;
    overflow: hidden;
    background: #2f6fd0;
    color: #fff;
    white-space: nowrap;
    font: 12px/1.4 ui-monospace, monospace;
}

.b0 { width: calc(pow(2, 0) * 12px); }
.b1 { width: calc(pow(2, 1) * 12px); }
.b2 { width: calc(pow(2, 2) * 12px); }
.b3 { width: calc(pow(2, 3) * 12px); }
.b4 { width: calc(pow(2, 4) * 12px); }

.bad {
    width: pow(2, 3);
    background: #d64545;
}

.t0 { font-size: calc(pow(1.25, 0) * 1rem); }
.t1 { font-size: calc(pow(1.25, 1) * 1rem); }
.t2 { font-size: calc(pow(1.25, 2) * 1rem); }
.t3 { font-size: calc(pow(1.25, 3) * 1rem); }

.t0, .t1, .t2, .t3 {
    margin: 2px 0;
    font-weight: 600;
}

.row {
    display: flex;
    gap: 8px;
}

.chip {
    padding: 8px 12px;
    background: #3a9a4f;
    color: #fff;
    font: 600 13px/1 system-ui, sans-serif;
}

.c1 { opacity: pow(0.7, 1); }
.c2 { opacity: pow(0.7, 2); }
.c3 { opacity: pow(0.7, 3); }
.c4 { opacity: pow(0.7, 4); }