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