shape-outside · 环绕shape-outside 与文字环绕
float 元素会把行内文字挤开,但默认挤开的是它的整个矩形盒——哪怕元素画成圆,文字还是贴着看不见的方角排。shape-outside 把这个「文字让位的轮廓」换成真正的形状:圆、椭圆、多边形、甚至一张图的 alpha 轮廓。它接受的正是
<basic-shape> 那套形状值。
1 · 不同轮廓下的环绕
只对 float 生效。shape-outside 的宿主必须是 float: left / right 的元素(得有确定尺寸)。没有「shape-inside」可用——它还停在 CSS Shapes Level 2 草案里(核对于 2026-08)。另外轮廓的参照盒默认是 margin-box,与 clip-path 的 border-box 默认不同。
2 · 用图像当轮廓:shape-image-threshold
shape-outside 还能接受一张 <image>(图片或渐变),浏览器按像素 alpha 提取轮廓:alpha > 阈值的区域算「形状内」。下面 float 元素的背景是一个往外渐隐的径向渐变,拖阈值看文字逼近 / 退让:
shape-image-threshold,观察阈值如何决定哪些像素算形状内。