序章

CSSShapesモジュール1の一部であるshape-outsideは、フローティング要素の周りにテキストを折り返すための形状を簡単に設定できる興味深いプロパティです。 たとえば、浮動要素が多くの空白を含む画像である場合、または境界半径が異なる場合、shape-outsideの値が関係して、その周囲のテキストがどのように折り返されるかを定義します。

shape-outsideを使用すると、雑誌で見慣れているページレイアウトに近いページレイアウトを作成できます。 これは、ブラウザをサポートするための優れたプログレッシブエンハンスメントであり、サポートされていないブラウザでは、プロパティは単に無視されます。

shape-outsideの値は、キーワード、形状関数、または画像へのURLにすることができます。 各オプションについて簡単に説明します。

形状キーワード

shape-outside は、margin-boxpadding-boxcontent-boxborder-boxなどの値に設定できます。 これにより、float要素に適用される境界半径値に続くテキストを簡単に作成できます。

Shape outside margin-box

margin-box
Lorem ipsum dolor sit amet、consecteturadipiscingelit。 Pellentesque faucibuseuismodtempor。 Ut accondimentumneque。 Vivamusveltristiquelacus。 Aenean volutpat volutpat diam、euvolutpatmauris。 Donec interdumtemporrisus。 Maecenaseutincidunttortor。 Donec tincidunt turpis enim、ac bibendum loremblanditat。 Pellentesque ullamcorper ex sit amet maurisdictumvarius。

img.shape1 {
  float: left;
  margin-right: 2rem;
  border-radius: 0% 90%;
  -webkit-shape-outside: margin-box;
  shape-outside: margin-box;
}

marginpaddingcontentborderキーワードの違いは、ブラウザーが図形の「境界」を設定する場所にあります。 たとえば、border-boxを設定すると、テキストは要素のborderの外側の端の周りを正確に流れるようになります。

形状関数

shape-outside は、 circle() polygon() ellipse()