在網(wǎng)頁設(shè)計(jì)中，圖片是一個(gè)很重要的元素，但有時(shí)候不僅要讓圖片顯示出來，還要讓文字圍繞圖片排列。那么，如何使用CSS實(shí)現(xiàn)這樣的效果呢？

這是一段文字，將環(huán)繞在圖片周圍。首先需要定義一個(gè)父容器，將圖片和文字包含在其中。我們可以為這個(gè)容器定義一個(gè)類名，例如wrapper。

接下來，我們需要對這個(gè)容器進(jìn)行樣式設(shè)置，以實(shí)現(xiàn)讓文字環(huán)繞在圖片周圍的效果。具體的實(shí)現(xiàn)步驟如下：

.wrapper {
width: 500px;
margin: 20px auto;
text-align: justify;
font-size: 16px;
line-height: 1.5;
}
.wrapper img {
float: right;
margin: 0 0 20px 20px;
width: 200px;
height: 200px;
shape-outside: url(example.jpg);
shape-margin: 20px;
}

上述代碼對于.wrapper類和其中的img標(biāo)簽進(jìn)行分別操作，分別設(shè)置它們的樣式屬性。其中，我們使用了float屬性，將圖片設(shè)置為右浮動(dòng)，讓文字可以在左側(cè)環(huán)繞。同時(shí)，給圖片設(shè)置了一個(gè)邊距，以保證文字和圖片之間的間距。然后，我們還對圖片使用了CSS的shape-outside屬性，可以讓文字排列在圖片周圍，可以根據(jù)需要設(shè)置為url()或者其他參數(shù)。最后，我們用shape-margin屬性設(shè)置圖片周圍的間距為20px，讓文字和圖片在視覺效果上更加美觀。

總的來說，實(shí)現(xiàn)讓文字圍繞圖片排列需要使用到 CSS 的多種樣式屬性，如float、text-align、shape-outside等等，要想實(shí)現(xiàn)好這個(gè)效果還需要進(jìn)行細(xì)致的一步步調(diào)整。這種效果在網(wǎng)頁設(shè)計(jì)中是很常見的，掌握這個(gè)技能可以讓我們更好地進(jìn)行創(chuàng)作。