CSS shape-outside 环绕效果演示 - 文字绕图排列

shape-outside 用于定义浮动元素周围文字环绕的非矩形形状路径。它打破了传统矩形的限制，让文字可以围绕圆形、椭圆、多边形甚至图片轮廓排列。常见应用场景包括：杂志风格的图文混排、产品展示页面的文字绕图、艺术性网页设计中的装饰元素环绕、以及头像周围的文字排列等。该属性仅对浮动元素生效（即设置了 float: left 或 float: right 的元素）。

• circle()：圆形，参数为半径（如 circle(50%)），可指定圆心位置。
• ellipse()：椭圆，需要两个半径参数（如 ellipse(50% 35%)），适合扁长形状。
• inset()：内切矩形，支持圆角（如 inset(10% round 20px)），相当于向内收缩的矩形。
• polygon()：多边形，通过顶点坐标定义任意形状（如三角形、五角星等），最灵活。
• url()：引用图片，使用图片的 alpha 通道（透明度）来定义形状轮廓。

shape-outside 控制的是文字环绕的路径（影响布局流），而 clip-path 控制的是元素的视觉裁剪（影响渲染外观）。两者互不干扰，但常常配合使用：用相同的形状定义同时设置 shape-outside 和 clip-path，可以让元素的视觉外观与文字环绕路径完美一致。例如，一个圆形头像既需要看起来是圆的（clip-path），也需要文字围绕圆形排列（shape-outside）。

shape-margin：设置形状边界与环绕文字之间的间距，类似 margin 但仅作用于形状外部。值可以是 px、em、% 等，默认为 0。增大该值会让文字离形状更远。

shape-image-threshold：仅在使用 url() 引用图片时有效，用于设定透明度阈值（0~1）。图片中透明度高于此阈值的像素被视为形状内部，低于的视为外部。默认值为 0，即只有完全透明的区域才被排除。

shape-outside 在现代浏览器中得到了广泛支持：Chrome 37+、Firefox 62+、Safari 10.1+、Edge 79+ 均完全支持。iOS Safari 10.3+ 和 Android Chrome 也提供支持。对于不支持的旧浏览器（如 IE），浮动元素会退化为普通矩形浮动，不影响基本布局。在移动端使用 shape-outside 时，建议注意浮动元素的尺寸比例，避免在窄屏幕上形状过大导致环绕空间不足。