CSS 如何实现文字环绕图片？

Question

CSS 如何实现文字环绕图片？

仓乃文 · Accepted Answer

文字环绕图片通过 shape-outside 属性定义环绕形状，让文字沿图片轮廓而非矩形边界排列。

```css
.circle-wrap {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 20px;
}
```

不规则形状环绕：
```css
.polygon-wrap {
  float: left;
  width: 200px;
  height: 200px;
  shape-outside: polygon(0 0, 100% 20%, 80% 100%, 20% 80%);
  clip-path: polygon(0 0, 100% 20%, 80% 100%, 20% 80%);
}
```

PNG 图片透明通道环绕：
```css
.png-wrap {
  float: left;
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
}
```

补充说明：
- shape-outside 只对浮动元素生效
- circle()、ellipse()、polygon() 定义几何形状
- url() 可读取 PNG 的 alpha 通道作为环绕形状
- shape-margin 控制文字与形状的间距