<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();