CSS Shapes 布局可以实现不规则的图文环绕效果。因为是图形环绕，所以被设置的元素应当首先被设置为float。

兼容非IE/Edge浏览器，移动端表现良好。

shape-outside 属性

支持如下四类属性值：

  1. none：默认值。
  2. <shape-box>：margin-box / border-box / padding-box / content-box
  3. <basic-shape>：circle( ) / ellipse( ) / inset( ) / polygon( )
  4. <image>：url( ) / linear-gradient( )等渐变图 / 其他图像类值cross-fade()、element()等

shape-margin 属性

控制文字环绕图形时文字与元素边界的距离。可以使用各种长度单位，也可以用百分比。

仅支持一个属性值，并且这个属性的数值范围是有限的，距离一旦超过浮动元素的边界，布局的效果就等同于普通的float效果了，不规则的边界就消失了。

shape-image-threshold 属性

指的其实是环绕的半透明形状的阈值。

默认值是0，即纯透明的区域可以被文字环绕。

如果将这个值设置为0.5，那么透明度小于0.5的区域也可以被文字环绕了。

布局案例：

将文本显示为一个圆形的轮廓：

https://demo.cssworld.cn/new/6/4-7.php