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