CSS exp() — експонента числа

Опис

Функція exp() корисна для встановлення значень, які швидко зростають зі збільшенням аргументу, у CSS властивостях. Наприклад, якщо ми хочемо встановити ширину елемента, яка залежить від експоненти числа, ми можемо зробити так:

.element {
  width: exp(2);
}

У цьому прикладі, функція exp() обчислить експоненту числа 2, що дорівнює приблизно 7.389, і встановить це значення для ширини .element.

Також можна використовувати функцію exp() з від'ємними аргументами:

.element {
  opacity: exp(-1);
}

У цьому прикладі, функція exp() обчислить експоненту від'ємного числа -1, що буде дуже близьким до 0.3679, і встановить це значення для прозорості .element.

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

правити

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

правити

Нотатка

Пам'ятайте, що функція exp() приймає лише один аргумент - число. Якщо передати більше аргументів або невірний тип даних, виникне помилка.

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

Нотатка

Зверніть увагу на діапазон значень, для яких функція exp() повертає правильні результати. Деякі значення можуть бути занадто великими або занадто малими для точного обчислення експоненти.

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

Нотатка

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

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

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

Синтаксис

exp(number);

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

<number>

Число, для якого потрібно обчислити експоненту.

автор: Bond

правити

Переглядачі

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

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

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

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

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

Приклади

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

<div id="description">
  <h2>Приклад</h2>
  <p>Елемент з обчисленою шириною за допомогою функції exp()</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 * exp(1));
  height: 100px;
  background: blue;
}

<p>Лінійний ряд: 12px, 24px, 36px, 48px, 60px</p>
<div class="row">
    <div class="bar l0"></div>
    <div class="bar l1"></div>
    <div class="bar l2"></div>
    <div class="bar l3"></div>
    <div class="bar l4"></div>
</div>

<p>Експонента: calc(exp(0 … 2) * 12px)</p>
<div class="row">
    <div class="bar e0"></div>
    <div class="bar e1"></div>
    <div class="bar e2"></div>
    <div class="bar e3"></div>
    <div class="bar e4"></div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 24px;
}

.row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 110px;
    margin-bottom: 20px;
    padding-bottom: 4px;
    border-bottom: 1px solid #cfd4d9;
}

.bar {
    width: 46px;
    background: #2f6f9f;
}

.l0 { height: 12px; }
.l1 { height: 24px; }
.l2 { height: 36px; }
.l3 { height: 48px; }
.l4 { height: 60px; }

.e0 { height: calc(exp(0) * 12px); }
.e1 { height: calc(exp(0.5) * 12px); }
.e2 { height: calc(exp(1) * 12px); }
.e3 { height: calc(exp(1.5) * 12px); }
.e4 { height: calc(exp(2) * 12px); }