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