CurvedCustom DIV Shape Tutorial

綜上所述，使用CSS進行文繞圖排版需要注意浮動的使用，可以通過控制浮動、設置文繞圖效果以及適時使用其他布局方式來實現所需的排版效果。

若是你不知道若何切換 (...我只是假定，如果，你真的真的從沒接觸過...)，請看下圖，按下這個按鈕就可以切換並看到原始碼在 HTML 原始碼中找到 < img src ... > 的文字，這段文字是網頁保持圖檔用。

如果你不知道如何切換 (...我只是假設，如果，你真的真的從沒接觸過...)，請看下圖，按下這個按鈕就能切換並看到原始碼在 HTML 原始碼中找到 < img src ... > 的文字，這段文字是網頁連結圖檔用。 請把 STYLE="FLOAT: LEFT; MARGIN: 15PX" 置入 img 跟 src 之間。

圖片 (img)必須在段落 (p)的上面，當圖片加上 float:left 屬性時，圖片的空間會消失，變成浮在畫面上，利用這個技巧，我們來做到文繞圖的效果。

使用基本形狀屬性值的時候，可以搭配形狀顯示方式 ( shape-box ) 一起使用，形狀顯示方式的屬性值類似 box-sizing 樣式，可以定義周圍內容環繞時最外側的定位，例如定位在外邊界、邊框或內邊距等位置，形狀顯示方式 ( shape-box ) 的屬性值會從下列的內建函式擇一使用： 外邊界外緣 ( 預設值 )。 邊框外緣。 內邊距外緣 ( 邊框內緣 )。 內邊距內緣。 float: left; shape-outside: inset (四邊邊距) margin-box; 圖片.

說明使用 CSS shape-outside 的屬性來設定文繞圖效果的方法。

雖然 float 和 shape-outside 是直接實現文繞圖的屬性，但現代的 CSS Flexbox 和 Grid 布局，能幫助你更好地控制整體版面，讓圖片與文字區域的組合更具彈性。