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 上查看此页面 • 报告此内容的问题