CSS 与布局 / CSS 里的 Path:一条路径的四种用途 / shape-outside 与文字环绕 待审核 5 / 7
shape-outside · 环绕

shape-outside 与文字环绕

float 元素会把行内文字挤开,但默认挤开的是它的整个矩形盒——哪怕元素画成圆,文字还是贴着看不见的方角排。shape-outside 把这个「文字让位的轮廓」换成真正的形状:圆、椭圆、多边形、甚至一张图的 alpha 轮廓。它接受的正是 <basic-shape> 那套形状值。

1 · 不同轮廓下的环绕

图 1-1 · 不同轮廓下文字的环绕形状。可切换轮廓,观察行盒如何贴着形状边界排布。

只对 float 生效。shape-outside 的宿主必须是 float: left / right 的元素(得有确定尺寸)。没有「shape-inside」可用——它还停在 CSS Shapes Level 2 草案里(核对于 2026-08)。另外轮廓的参照盒默认是 margin-box,与 clip-pathborder-box 默认不同。

2 · 用图像当轮廓:shape-image-threshold

shape-outside 还能接受一张 <image>(图片或渐变),浏览器按像素 alpha 提取轮廓:alpha > 阈值的区域算「形状内」。下面 float 元素的背景是一个往外渐隐的径向渐变,拖阈值看文字逼近 / 退让:

图 2-1 · 以图像 alpha 提取环绕轮廓。可拖动 shape-image-threshold,观察阈值如何决定哪些像素算形状内。

3 · shape-outside 支持哪些形状值(本浏览器实测)

图 3-1 · 各形状函数在当前浏览器的实测支持情况。