外形与基本形状圆（）

使用 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