CSS shape-outside 属性

定義と使用方法

shape-outside 属性は、インラインコンテンツの囲み形状を定義します。デフォルトでは、インラインコンテンツは外マージンボックスを基に囲まれますが、 shape-outsideを使用して、この囲み方をカスタマイズできます。

shape-outside 属性は、フロート要素のフロートエリアを定義します。このフロートエリアは、インラインコンテンツがフロート要素を囲む形状を定義します。

例

画像を円形で囲んでインラインコンテンツを回転させる：

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

実際に試してみてください

CSS文法

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(image)|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。