CSS 具有基本形状的外部形状– circle()

示例

使用shape-outsideCSS属性，可以为浮动区域定义形状值，以便内联内容环绕形状而不是浮动框。

的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 xx_src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img xx_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