如何使用 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 選項那麼簡單，但此方法提供了一種在網頁設計中創建有影響力的視覺效果的解決方法。