superellipse()

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Hàm superellipse() CSS function xác định độ cong của một hình elip, và được dùng để chỉ định hình dạng góc trực tiếp hoặc thông qua các từ khóa <corner-shape-value>.

Cú pháp

css

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

Tham số

<number>: Một số trong khoảng từ -infinity đến infinity, bao gồm cả hai đầu.

Hàm superellipse() trả về một hình dạng siêu elip, được dùng để chỉ định các giá trị corner-shape. Siêu elip là một đường cong khép kín đối xứng nằm giữa hình chữ nhật và hình elip. Nó giống một hình elip nhưng giữ lại các đặc điểm hình học của hai trục.

Hình dạng siêu elip được tính toán dựa trên một phiên bản sửa đổi của phương trình elip. Phương trình sau định nghĩa một hình elip có tâm tại gốc tọa độ:

\frac{x^{2}}{a^{2}} + \frac{y^{2}}{b^{2}} = 1

Các biến a và b là bán kính của hình elip, còn các tọa độ x và y là các điểm trên chu vi của hình elip.

Hình tròn là trường hợp đặc biệt của hình elip khi hai bán kính a và b bằng nhau. Với a và b đều bằng r, phương trình đường tròn có thể viết là:

x^{2} + y^{2} = r^{2}

Trong phương trình này, x và y là tọa độ các điểm trên chu vi đường tròn, và r là bán kính với tâm tại (0, 0). Hình elip được tạo ra bằng cách co giãn hình tròn theo trục x và/hoặc y.

Hình dạng siêu elip được tạo bằng cách thay số mũ 2 trong mỗi trường hợp bằng 2^K, trong đó K là đối số truyền vào hàm superellipse(), giúp điều chỉnh độ cong của hình elip:

x^{2^{K}} + y^{2^{K}} = 1

Sơ đồ sau minh họa các giá trị superellipse() khác nhau cho góc trên phải của một container: infinity, 1, 0, -1 và -infinity:

Sơ đồ đường minh họa các hình elip được tạo bằng các giá trị K khác nhau, như mô tả tiếp theo

Giá trị K bằng 0 tạo ra một đường thẳng. Giá trị này có thể dùng để tạo góc vát và tương ứng với từ khóa bevel của <corner-shape-value>.
Giá trị K bằng 1 tạo ra hình elip thông thường, tương ứng với từ khóa round.
Giá trị K lớn hơn 1 làm hình elip có dạng vuông hơn; 2 tương ứng với từ khóa squircle.
Giá trị K bằng infinity tạo ra một hình vuông hoàn hảo (tương ứng với từ khóa square), mặc dù các giá trị K từ 10 trở lên về cơ bản không thể phân biệt với hình vuông.
Các giá trị K âm tạo ra đường cong lõm, dẫn đến các hình dạng góc cong vào trong hoặc "bị khoét". Giá trị K bằng -1 tương ứng với từ khóa scoop và -infinity tương ứng với từ khóa notch.

Một siêu elip âm hoặc dương sẽ trông đối xứng với siêu elip có giá trị nghịch đảo của nó.

Note: Đối với bất kỳ giá trị tham số K nào được truyền vào, giá trị trả về của hàm superellipse() luôn giống nhau cho giá trị K đó. Khi giá trị đó được áp dụng cho hai phần tử, hình dạng góc có thể khác nhau nếu kích thước hộp hoặc các giá trị border-radius khác nhau.

Cú pháp chính thức

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

Ví dụ

So sánh các giá trị `superellipse()`

Trong ví dụ này, hai thanh trượt <input type="range"> cho phép bạn duyệt qua nhiều giá trị corner-shape superellipse() và giá trị border-radius khác nhau, giúp bạn so sánh hiệu ứng của từng giá trị lên một container. Code được ẩn để ngắn gọn, nhưng bạn có thể xem giải thích đầy đủ về so sánh giá trị superellipse trên trang tham khảo 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();

Note: Xem thêm ví dụ so sánh giá trị <corner-shape-value>.