corner-top-left-shape
corner-top-left-shape CSS 屬性用於指定盒子左上角的形狀，在它的 border-radius 區域內。
有關角形狀行為的完整描述和多個示例，請參見 corner-shape 簡寫屬性頁面。
語法
css
/* Keyword values */
corner-top-left-shape: notch;
corner-top-left-shape: squircle;
/* superellipse() function values */
corner-top-left-shape: superellipse(3);
corner-top-left-shape: superellipse(-1.5);
/* Global values */
corner-top-left-shape: inherit;
corner-top-left-shape: initial;
corner-top-left-shape: revert;
corner-top-left-shape: revert-layer;
corner-top-left-shape: unset;
值
corner-top-left-shape 屬性使用 <corner-shape-value> 值來指定。
正式定義
在資料庫中未找到值！正式語法
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-top-left-shape 的基本用法
HTML
此示例的標記包含一個單獨的 <div> 元素。
html
<div></div>
CSS
我們給盒子設定了一些基本的樣式，為了簡潔已隱藏。我們還應用了 box-shadow，border-radius 為 25% 100px，以及 corner-top-left-shape 為 scoop。
css
div {
box-shadow: 1px 1px 3px gray;
border-radius: 25% 100px;
corner-top-left-shape: scoop;
}
結果
渲染結果如下所示：
規範
| 規範 |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-left-shape |
瀏覽器相容性
載入中…