使用 CSS 讓文字圍繞圖片可以使網(wǎng)頁(yè)更加美觀，下面讓我們來(lái)學(xué)習(xí)一下吧。 首先，我們需要在 HTML 中插入一張圖片：

<img src="image.jpg" alt="圖片" />

接著，在 CSS 中使用 `float` 屬性來(lái)使圖片左或右浮動(dòng)：

img {
float: left; /* 或 right */
}

然后，在文字所在的標(biāo)簽中加入 `shape-outside` 屬性，并設(shè)置值為 `circle()` 或 `polygon()`，這樣文字就可以根據(jù)圖片的形狀進(jìn)行環(huán)繞了。 對(duì)于圓形圖片，`shape-outside` 的值可以設(shè)置為 `circle()`，其中圓括號(hào)里面的第一個(gè)參數(shù)是圓心的位置，可以使用像素或百分比的值，第二個(gè)參數(shù)是圓的半徑。

p {
shape-outside: circle(50%, 150px);
float: left;
margin-right: 20px;
}

對(duì)于不規(guī)則形狀的圖片，可以使用 `polygon()`，其中每對(duì)數(shù)字表示一個(gè)點(diǎn)的 x 和 y 坐標(biāo)，坐標(biāo)之間使用逗號(hào)分隔。

p {
shape-outside: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
float: right;
margin-left: 20px;
}

值得注意的是，為了使 `shape-outside` 生效，文字所在的標(biāo)簽必須是一個(gè)塊級(jí)元素，并且不能被其他元素包裹。 以上就是使用 CSS 讓文字環(huán)繞圖片的方法，希望對(duì)您有所幫助。