CSS 文字環繞是指讓文本圍繞某個對象的排布方式，通常應用于圖像或其他非文字元素。 CSS3 中提供了一個文本環繞的函數：`shape-outside`。使用該函數，我們可以很容易地將文本按照某個形狀進行環繞。 例如，我們需要將一張圓形圖片的左側文字進行環繞。以下是 CSS 代碼： ``` css img { float: left; width: 200px; height: 200px; border-radius: 50%; shape-outside: circle(); margin: 10px; } p { margin: 0; } ``` 上述代碼中，`shape-outside` 屬性指定了圓形，`margin` 屬性用于消除默認的間距，使得文本能夠完全圍繞圖片排布。 此外，我們還可以通過 `clip-path` 屬性來實現文本環繞： ``` css img { float: right; width: 200px; height: 200px; margin: 10px; clip-path: circle(50%); } p { margin: 0; } ``` 上述代碼中，`clip-path` 屬性指定了圓形，`float` 屬性用于讓圖片浮動到右側，`margin` 屬性用于調整與其他元素的間距，讓文本環繞排布更加美觀。注意，為了使得 `clip-path` 屬性生效，我們需要設置圖片的 `position` 為 `relative` 或 `absolute`。 除了圓形，我們還可以通過多邊形或自定義形狀來實現文本環繞。例如，以下代碼將一張三角形圖片的左側文字進行環繞： ``` css img { float: left; width: 200px; height: 200px; clip-path: polygon(0 0, 0 100%, 100% 0); margin: 10px; } p { margin: 0; } ``` 上述代碼中，`clip-path` 屬性指定了三角形的坐標點，`margin` 屬性用于調整與其他元素的間距。 總之，CSS 文字環繞是一個很有趣的功能，它可以讓我們更加靈活地排布元素。不過，需要注意的是，不是所有的瀏覽器都支持該功能，建議在使用時進行兼容性檢測。