CSS-функция `superellipse()`

superellipse() — это CSS-функция, которая задаёт кривизну эллипса и используется для определения формы углов напрямую или с помощью ключевых слов <corner-shape-value>.

Синтаксис

superellipse(infinity)
superellipse(4)
superellipse(1.7)
superellipse(0)
superellipse(-2.8)
superellipse(-3)
superellipse(-infinity)

Параметры

<number>

Число в диапазоне от -infinity до infinity включительно.

Возвращаемое значение

Форма суперэллипса.

Описание

Функция superellipse() возвращает форму суперэллипса, которая используется для задания значений corner-shape. Суперэллипс — это замкнутая симметричная кривая, занимающая промежуточное положение между прямоугольником и эллипсом. Он напоминает эллипс, сохраняющий геометрические свойства своих двух осей.

Форма суперэллипса вычисляется с использованием модифицированной версии эллипса. Следующее уравнение задаёт эллипс с центром в начале координат:

Переменные a и b обозначают радиусы эллипса, а координаты x и y — точки на его окружности.

Окружность — это эллипс, у которого радиусы, то есть a и b в предыдущем уравнении, имеют одинаковую длину. Если a и b равны r, уравнение окружности можно записать так:

В этом уравнении x и y — координаты точек на окружности, а r — радиус окружности с центром в точке (0, 0). Эллипс получается масштабированием окружности вдоль оси x и/или y.

Форма суперэллипса создаётся заменой показателя степени 2 в каждом случае на 2^K, где K — аргумент, переданный функции superellipse(), который изменяет кривизну эллипса:

На следующей схеме показаны различные значения superellipse() для верхнего правого угла контейнера: infinity, 1, 0, -1 и -infinity:

• Значение K, равное 0, создаёт прямую линию. Это значение можно использовать для создания скошенных углов; оно соответствует ключевому слову bevel из <corner-shape-value>.
• Значение K, равное 1, создаёт обычный эллипс, соответствующий ключевому слову round.
• Значение K, равное >1, делает форму эллипса более квадратной; 2 соответствует ключевому слову squircle.
• Значение K, равное infinity, создаёт идеальный квадрат (соответствующий ключевому слову square), хотя значения K, равные 10 или больше, практически неотличимы от квадрата.
• Отрицательные значения K дают вогнутую кривую, в результате чего углы изгибаются внутрь, образуя выемки. Значение K, равное -1, соответствует ключевому слову scoop, а -infinity соответствует ключевому слову notch.

Положительный или отрицательный суперэллипс будет выглядеть симметричным суперэллипсу с обратным значением.

Формальный синтаксис

<superellipse()> = 
  superellipse( [ <number> | infinity | -infinity ] )

Примеры

Сравнение значений superellipse()

В этом примере два ползунка <input type="range"> позволяют перебирать различные значения corner-shape superellipse() и значения border-radius, чтобы сравнить их влияние на контейнер. Для краткости код скрыт, но полное объяснение примера сравнения значений суперэллипса приведено на справочной странице corner-shape.

<form>
  <div>
    <label for="superellipse-slider">Choose a superellipse() value:</label>
    <input
      type="range"
      id="superellipse-slider"
      min="-5"
      value="0"
      max="5"
      step="0.1" />
  </div>
  <div>
    <label for="radius-slider">Choose a border-radius value:</label>
    <input type="range" id="radius-slider" min="0" value="45" max="90" />
  </div>
</form>
<section></section>

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

body {
  width: fit-content;
  margin: 20px auto;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 100%;
  margin-top: 20px;
}

form div {
  margin-top: 5px;
  display: flex;
}

section {
  width: 100%;
  height: 180px;
  background-color: orange;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

section {
  box-shadow: 1px 1px 3px gray;
}

const rectangle = document.querySelector("section");
const superEllipseRange = document.getElementById("superellipse-slider");
const borderRadiusRange = document.getElementById("radius-slider");

function setCorners() {
  const seValue = `superellipse(${superEllipseRange.value})`;
  rectangle.style.cornerShape = seValue;
  const brValue = `${borderRadiusRange.value}px`;
  rectangle.style.borderRadius = brValue;
  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;
}

superEllipseRange.addEventListener("input", setCorners);
borderRadiusRange.addEventListener("input", setCorners);
setCorners();

Спецификации

Совместимость с браузерами

См. также

• corner-shape
• <corner-shape-value>
• Модуль CSS borders and box decorations