文章出處
文章列表
現在真是越來越注重用戶體驗了，而“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教程
文章列表
全站熱搜
留言列表
