corner-top-shape
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
corner-top-shape は CSS のプロパティで、ボックスの下端の両方の角の border-radius 領域における形状を指定します。
全体的な角の形状の解説と複数の例については、corner-shape 一括指定プロパティページを参照してください。
構成要素のプロパティ
corner-top-shape プロパティは、以下の物理的プロパティの一括指定です。
構文
css
/* 単一のキーワード値で両方の角を設定 */
corner-top-shape: notch;
corner-top-shape: squircle;
/* 単一の superellipse() 値で両方の角を設定 */
corner-top-shape: superellipse(3);
corner-top-shape: superellipse(-1.5);
/* 左端の角、右端の角 */
corner-top-shape: notch squircle;
corner-top-shape: notch superellipse(-1.5);
/* グローバル値 */
corner-top-shape: inherit;
corner-top-shape: initial;
corner-top-shape: revert;
corner-top-shape: revert-layer;
corner-top-shape: unset;
値
corner-top-shape プロパティは 1 つまたは 2 つの <corner-shape-value> 値で指定します。
- 1 つの値が使用された場合、上端の両方の角の形状を指定します。
- 2 つの値が使用された場合、1 つ目は左上の角、2 つ目は右上の角の形状を指定します。
公式定義
DB に値が見つかりません！形式文法
corner-top-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-top-shape の使い方
HTML
この例のマークアップには、<div> 要素が 1 つあります。
html
<div></div>
CSS
ボックスにいくつかの基本的なスタイルを設定していますが、簡略化のため省略します。また、box-shadow と、border-radius を 60 ピクセルに、corner-top-shape を scoop notch に適用しています。
css
div {
box-shadow: 1px 1px 3px gray;
border-radius: 60px;
corner-top-shape: scoop notch;
}
結果
表示結果は次のようになります。
仕様書
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-top-shape |