corner-block-end-shape
corner-block-end-shape CSS 屬性指定了框的塊尾邊緣內，在其 border-radius 區域中，兩個角的形狀。
有關角形狀行為的完整描述和多個示例，請參見 corner-shape 簡寫屬性頁面。
構成屬性
corner-block-end-shape 屬性是以下物理屬性的簡寫：
語法
css
/* Single keyword value set for both corners */
corner-block-end-shape: square;
corner-block-end-shape: scoop;
/* Single superellipse() value set for both corners */
corner-block-end-shape: superellipse(3.5);
corner-block-end-shape: superellipse(-1.9);
/* Block-end/inline-start corner, block-end/inline-end corner */
corner-block-end-shape: square scoop;
corner-block-end-shape: square superellipse(-1.9);
/* Global values */
corner-block-end-shape: inherit;
corner-block-end-shape: initial;
corner-block-end-shape: revert;
corner-block-end-shape: revert-layer;
corner-block-end-shape: unset;
值
corner-block-end-shape 屬性使用一個或兩個 <corner-shape-value> 值指定
- 如果使用一個值，它指定兩個塊尾角的形狀。
- 如果使用兩個值，第一個值指定塊尾/行首角的形狀，第二個值指定塊尾/行尾角的形狀。
正式定義
在資料庫中未找到值！正式語法
corner-block-end-shape =
<'corner-top-left-shape'>{1,2}
<corner-top-left-shape> =
<corner-shape-value>
<corner-shape-value> =
round |
scoop |
bevel |
notch |
square |
squircle |
<superellipse()>
<superellipse()> =
superellipse( <number [-∞,∞]> |
infinity |
-infinity )
示例
你可以在 corner-shape 參考頁面上找到其他相關示例。
corner-block-end-shape 基本用法
HTML
此示例的標記包含一個單獨的 <div> 元素。
html
<div></div>
CSS
我們給框一些基本樣式，為了簡潔起見我們隱藏了它們。我們還應用了一個 box-shadow，一個 80px / 40px 的 border-radius，以及 notch square 的 corner-block-end-shape。
css
div {
box-shadow: 1px 1px 3px gray;
border-radius: 80px / 40px;
corner-block-end-shape: notch square;
}
結果
渲染結果如下所示：
規範
| 規範 |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-block-end-shape |
瀏覽器相容性
載入中…