CSS怎樣把文字環(huán)繞圖片 在網(wǎng)頁設(shè)計(jì)中，將文字環(huán)繞圖片是一種常見的布局方式，可以使網(wǎng)頁內(nèi)容更加豐富，讓用戶有更好的閱讀體驗(yàn)。當(dāng)然，實(shí)現(xiàn)這個(gè)效果還需要一些CSS技巧。以下是一些實(shí)現(xiàn)文字環(huán)繞圖片的方法。 方法一：使用float屬性 float屬性可以讓元素浮動(dòng)，將圖片設(shè)置為浮動(dòng)并設(shè)置對應(yīng)的margin值，然后給文字設(shè)置一個(gè)對應(yīng)的margin值就可以實(shí)現(xiàn)環(huán)繞的效果。 示例代碼：

img{
float: left;
margin-right: 15px;
}
p{
margin-left: 20px;
text-align: justify;
}

方法二：使用shape-outside屬性 shape-outside屬性可以讓我們通過自定義形狀實(shí)現(xiàn)元素的環(huán)繞效果。只需設(shè)置與圖片相對應(yīng)的形狀值即可。 示例代碼：

img{
float:left;
height: 200px;
shape-outside: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
margin-right: 20px;
margin-bottom: 20px;
}
p{
text-align: justify;
}

以上就是兩種實(shí)現(xiàn)CSS文字環(huán)繞圖片的方法。當(dāng)然，還有其他的方法可以實(shí)現(xiàn)該效果，但以上兩種方法使用較為廣泛，也較為簡單易懂。大家可以根據(jù)自己的實(shí)際需求，選擇適合自己的方法。