通過shape-outside來設置文字環繞時的形狀

現在真是越來越注重用戶體驗了，而“shape-outside”就是其中一個能讓網頁排版更友好的一個屬性。

默認文字是根據圖片的邊進行的。

但現在我們完全有能力去改變這一行為，下面是通過shape-outside來實現文字根據白色的那個圈圈來排版的，雖然不是很精確。

來看看代碼

<style>
  img{
    width:600px;
    height:500px;
    float: left;
    shape-outside: inset(10px 20px 5px 5px round 37%);
  }
<img src="bg.png" />
<p>一大坨文字...................</p>
</style>

看起來好復雜的樣子，沒事，看...

這里的10px 20px 5px 5px就是top right bottom left。round 37%就是border-radius，從這個動畫中，我們不難看出其實這個shape-outside就是裁剪一個矩形，然后文字會根據這個矩形來擺放。

如果元素是一個圓的想圍繞這個圓在浮動的話，可以這樣。

代碼：

<style>
  img{
    width:600px;
    height:500px;
    float: left;
    border-radius:50%;
    shape-outside: border-box;
  }
</style>

如果想了解更多，可以看MDN-shape-outside教程