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
热门推荐
10 小红书平安祝福语简短
11 生日祝福语大全女孩简短
12 收生日红包祝福语 简短
13 领证幽默祝福语简短
14 法考面试祝福语简短
15 老哥出门祝福语简短语
16 送灯祝福语简短独特
17 幼儿狗年祝福语大全简短
18 好听的元旦简短祝福语