CSS shape-outside 形状环绕

shape-outside文字环绕非矩形形状：circle()/ellipse()/polygon()/inset()/url(图片alpha通道提取形状)、shape-margin形状外间距、与clip-path配合裁剪+环绕、杂志风格排版 · 难度：入门 · +10XP

CSS shape-outside —— 文字绕图排版

杂志排版中经常看到文字围绕圆形图片或斜切边缘排列。shape-outside属性让网页也能做到。

圆形环绕

.circle-image {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);  /* 文字围绕圆形排列 */
  margin-right: 20px;
}

多边形环绕

.polygon-image {
  float: left;
  shape-outside: polygon(0 0, 100% 10%, 100% 90%, 0 100%);
}

动手练习

1. 基础练习：做一个圆形头像+文字环绕的自我介绍卡片。
2. 进阶应用：用polygon做一个斜切边缘的横幅——左边图片区域斜向右，文字沿斜边排列。
3. 项目实战：在文章正文中嵌入图片，用shape-outside做杂志级别的文字图文混排。