<corner-shape-value> 数据类型可以采用定义自定义形状的 superellipse() 函数，或者六个关键字值之一，这些关键字值描述了常见的 superellipse() 值。
superellipse()-
定义一个自定义的圆滑矩形角形状。负参数创建内向或凹入的曲线，而正参数创建外向或凸出的曲线。
- 关键词
-
可用的关键字值如下：
bevel-
定义一个笔直的对角角，它既不是凸出也不是凹入。bevel 关键字等同于 superellipse(0)。
notch-
定义一个 90 度的凹入方形角。notch 关键字等同于 superellipse(-infinity)。
round-
定义一个凸出的普通椭圆，这是在未应用 corner-shape 的情况下，由 border-radius 创建的标准圆角。round 关键字等同于 superellipse(1)。这是所有 corner-shape 属性的默认（初始）值。
scoop-
定义一个凹入的普通椭圆。scoop 关键字等同于 superellipse(-1)。
square-
定义一个 90 度的凸出方形角，这是在未应用 border-radius（或 border-radius: 0）时，默认的角形状。square 关键字等同于 superellipse(infinity)。
squircle-
定义一个“方圆形”，它是在 round 和 square 之间的一种凸出曲线。squircle 关键字等同于 superellipse(2)。
注意： 您可以在不同的 superellipse() 值之间以及不同的角形状关键字之间平滑地进行动画过渡，因为动画会在它们的 superellipse() 等效值之间进行插值。
<corner-shape-value> =
round |
scoop |
bevel |
notch |
square |
squircle |
<superellipse()>
<superellipse()> =
superellipse( <number [-∞,∞]> |
infinity |
-infinity )
在此示例中，我们提供了一个下拉菜单，允许您选择不同的 <corner-shape-value> 值，以及一个更新容器 border-radius 的滑块。这使得可以可视化不同关键字和 superellipse() 参数值的效果。
corner-shape 属性定义了盒子角的形状，而形状应用的区域由 border-radius 属性指定。为了简洁，代码已隐藏，但您可以在 corner-shape 参考页面上找到 corner-shape 值的完整解释以及其他相关示例。
<form>
<div>
<label for="corner-shape-choice">Choose a corner-shape value:</label>
<select id="corner-shape-choice">
<optgroup label="Keywords">
<option value="square">square | superellipse(infinity)</option>
<option selected value="squircle">squircle | superellipse(2)</option>
<option value="round">round | superellipse(1)</option>
<option value="bevel">bevel | superellipse(0)</option>
<option value="scoop">scoop | superellipse(-1)</option>
<option value="notch">notch | superellipse(-infinity)</option>
</optgroup>
<optgroup label="Functions">
<option>superellipse(3)</option>
<option>superellipse(1.5)</option>
<option>superellipse(0.5)</option>
<option>superellipse(-0.5)</option>
<option>superellipse(-1.5)</option>
<option>superellipse(-3)</option>
</optgroup>
</select>
</div>
<div>
<label for="radius-slider">Choose a border-radius value:</label>
<input
type="range"
id="radius-slider"
min="0"
value="45"
max="90"
step="1" />
</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;
margin-top: 20px;
}
select {
padding: 3px 5px;
}
form div:nth-of-type(2) {
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 select = document.querySelector("select");
const range = document.getElementById("radius-slider");
function setCorners() {
rectangle.style.cornerShape = select.value;
const brValue = `${range.value}px`;
rectangle.style.borderRadius = brValue;
rectangle.innerHTML = `<div><code>corner-shape: ${select.value};</code><br><code>border-radius: ${brValue};</code></div>`;
}
select.addEventListener("change", setCorners);
range.addEventListener("input", setCorners);
setCorners();