外形與基本形狀圓（）

使用 shape-outside CSS 屬性，可以定義浮動區域的形狀值，以便內聯內容環繞形狀而不是浮動框。

CSS

img:nth-of-type(1) {
  shape-outside: circle(80px at 50% 50%);
  float: left;
  width: 200px;
}
img:nth-of-type(2) {
  shape-outside: circle(80px at 50% 50%);
  float: right;
  width: 200px;  
}
p {
  text-align: center;
  line-height: 30px; /* purely for demo */
}

HTML

<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>

在上面的例子中，兩個影象實際上是方形影象，當文字放置時沒有 shape-outside 屬性時，它不會繞任何一側的圓圈流動。它將僅圍繞影象的包含框流動。使用 shape-outside，浮動區域被重新定義為*圓形，*並且使內容圍繞使用 shape-outside 建立的假想圓圈流動。

用於重新定義浮動區域的虛圓是從影象參考框的中心點繪製的半徑為 80px 的圓。

下面是一些螢幕截圖，用於說明當使用 shape-outside 時以及何時不使用內容時如何包裝內容。

用 shape-outside 輸出

輸出沒有 shape-outside