superellipse()

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

superellipse() CSS 函式定義了橢圓的曲率，並用於直接或透過 <corner-shape-value> 關鍵字指定角部形狀。

語法

css

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

引數

<number>: 一個在 -infinity 到 infinity 之間（包含兩者）的數字。

返回值

一個超橢圓形狀。

描述

superellipse() 函式返回一個超橢圓形狀，用於指定 corner-shape 值。超橢圓是介於矩形和橢圓之間的一種閉合曲線對稱形狀。它類似於橢圓，但保留了其兩條軸的幾何特徵。

超橢圓形狀是使用橢圓的修改版本計算的。以下方程定義了一個以原點為中心的橢圓：

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

變數 a 和 b 指的是橢圓的半徑，而 x 和 y 座標是橢圓周長上的點。

當橢圓的半徑（上一個方程中的 a 和 b）長度相同時，它就是一個圓。當 a 和 b 都等於 r 時，圓的方程可以寫成：

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

在這個方程中，x 和 y 是圓周上點的座標，r 是圓的半徑，圓心是 (0, 0)。橢圓是透過沿 x 軸和/或 y 軸縮放圓形形狀而生成的。

超橢圓形狀是透過將每種情況下的指數 2 替換為 2^K 而建立的，其中 K 是傳遞給 superellipse() 函式的引數，它修改了橢圓的曲率：

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

下圖展示了容器右上角的不同 superellipse() 值：infinity、1、0、-1 和 -infinity

Line diagram illustrating the ellipses created using different K values, as described subsequently

K 值為 0 會建立一條直線。此值可用於建立斜切角，並對應於 <corner-shape-value> bevel 關鍵字。
K 值為 1 會建立普通橢圓，對應於 round 關鍵字。
K 值 >1 使橢圓形狀更接近正方形；2 對應於 squircle 關鍵字。
K 值 infinity 會建立一個完美的正方形（對應於 square 關鍵字），儘管 K 值等於或大於 10 時，實際上與正方形無法區分。
負 K 值會導致凹曲線，從而產生向內彎曲或“挖空”的角部形狀。K 值為 -1 對應於 scoop 關鍵字，-infinity 對應於 notch 關鍵字。

負超橢圓或正超橢圓與具有其反值的超橢圓看起來是對稱的。

注意：對於傳遞的任何 K 引數值，superellipse() 函式的返回值對於該 K 值始終相同。當該值應用於兩個元素時，如果框大小或 border-radius 值不同，角部形狀的外觀可能會有所不同。

正式語法

<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-value> 值比較示例。

規範

規範
CSS Borders and Box Decorations Module Level 4 # funcdef-superellipse

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025年10月13日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題