我們經(jīng)常需要用到圖片來豐富網(wǎng)頁，但有時(shí)候圖片比較單調(diào)，如果我們能夠讓文字圍繞著圖片，那么頁面將會(huì)更為生動(dòng)。這就需要了解一下CSS如何設(shè)置文字圍繞圖片。

img{
float: left;
margin-right: 10px;
}

上面的代碼中，我們選中圖片元素，然后設(shè)置了它的浮動(dòng)方向?yàn)樽蟾?dòng)，并且設(shè)置了它的右邊距為10像素。這樣的話，圖片就會(huì)被浮動(dòng)到文字的左側(cè)，而文字會(huì)自動(dòng)圍繞圖片排列。

上面的代碼只是一個(gè)簡(jiǎn)單的示例，實(shí)際上CSS對(duì)文字圍繞圖片的設(shè)置還有很多其他的屬性。比如說，可以使用shape-outside屬性，讓文字圍繞著不規(guī)則形狀的圖片排列。還可以使用clip-path屬性，對(duì)圖片進(jìn)行任意形狀的裁剪。

img{
shape-outside: circle();
float: left;
margin-right: 10px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 50% 85%, 40% 100%, 0% 100%);
}

上面的代碼中，圓形形狀的圖片將會(huì)讓圍繞著它的文字排列成一個(gè)圓形的形狀，并且使用clip-path屬性對(duì)圖片進(jìn)行了裁剪，使得圖片呈現(xiàn)的是多邊形的形狀。

值得注意的是，不是所有的瀏覽器都支持shape-outside屬性和clip-path屬性，所以在編寫頁面的時(shí)候需要注意一下兼容性問題。

總之，使用CSS讓文字圍繞著圖片排列，能夠讓頁面更具有吸引力，并且可以讓頁面的排版更為靈活多變。我們只需要選擇合適的屬性和值，就能夠輕松實(shí)現(xiàn)這一效果。