如何使用 CSS 将文本环绕在非矩形图像周围？

文本环绕非矩形图像：指南

文本可以环绕非矩形图像吗？为了实现这种效果，让文本无缝地符合国家或其他不规则形状的形状，让我们探索一下 Tory Lawson 在博文中分享的方法。

第 1 步：建立环绕区域

首先确定文本应换行的区域。这可以使用 Fireworks 等图像编辑软件来完成。设置具有适当间距的网格，然后绘制代表所需文本结束位置的边界线，并留有轻微的填充。

第 2 步：创建列表

以预定义的间隔（例如 10 个像素）测量该不规则形状的宽度。将这些测量值记录在列表中。此列表将指导下一步创建 div。

第 3 步：构建 Div 并应用 CSS

为列表和嵌套中的每个测量创建 div 元素它们位于包装 div 中。将这些 div 向右浮动并确保它们清除所有右浮动元素。最后，设置包装器 div 的高度和宽度以及不规则形状的背景图像。

代码示例

这里是基于 Tory Lawson 方法的简化代码示例:

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 634px;
  height: 428px;
  display: block;
  background-image: url("headshot.jpg");
}
.spacer {
  display: block;
  float: right;
  clear: right;
}
p {
  display: inline;
  color: #FFF;
}

按照以下步骤，您可以有效地将文本环绕在非矩形周围图像，让文本在复杂形状的轮廓周围自然流动。虽然不像专用的“文本换行”CSS 选项那么简单，但此方法提供了一种在网页设计中创建有影响力的视觉效果的解决方法。