1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. corner-start-start-shape

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

corner-start-start-shape

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

Want more support for this feature? Tell us why.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

corner-start-start-shape は CSS のプロパティで、ボックスのブロック先頭、インライン先頭の角の border-radius 領域における形状を指定します。

全体的な角の形状の解説と複数の例については、corner-shape 一括指定プロパティページを参照してください。

構文

css
/* キーワード値 */
corner-start-start-shape: notch;
corner-start-start-shape: squircle;

/* superellipse() 関数値 */
corner-start-start-shape: superellipse(3);
corner-start-start-shape: superellipse(-1.5);

/* グローバル値 */
corner-start-start-shape: inherit;
corner-start-start-shape: initial;
corner-start-start-shape: revert;
corner-start-start-shape: revert-layer;
corner-start-start-shape: unset;

値

corner-start-start-shape プロパティは <corner-shape-value> 値で指定します。

公式定義

初期値round
適用対象すべての要素。 ::first-letter にも適用されます。
継承なし
計算値The corresponding superellipse() value.
アニメーションの種類Animates as per superellipse interpolation.

形式文法

corner-start-start-shape = 
  <corner-shape-value>  

<corner-shape-value> = 
  round             |
  scoop             |
  bevel             |
  notch             |
  square            |
  squircle          |
  <superellipse()>  

<superellipse()> = 
  superellipse( <number>  |
  infinity                |
  -infinity )
この構文は CSS Borders and Box Decorations Module Level 4 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

その他の関連する例は、corner-shape リファレンスページにあります。

基本的な corner-start-start-shape の使い方

HTML

この例のマークアップには、<div> 要素が 1 つあります。

html
<div></div>

CSS

ボックスにいくつかの基本的なスタイルを設定していますが、簡略化のため省略します。また、box-shadow と、border-radius を 40% 10px 10px に、corner-start-start-shape を scoop に適用しています。

css
div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 40% 10px 10px;
  corner-start-start-shape: scoop;
}

結果

表示結果は次のようになります。

仕様書

仕様書
CSS Borders and Box Decorations Module Level 4
# propdef-corner-start-start-shape

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告