初識 CSS Shapes
先來看以下效果:右側文字環圓環排版。
在未了解css shapes之前,實現這樣的排版還是挺費事的,比如為每行設定不同的padding值。但是有了css shapes之後,兩行css就搞定啦,一起來看看吧。
See the Pen ofollow,noindex" target="_blank">css-shapes by cc ( @glccgl ) on CodePen .
實現以上效果的主要屬性是shape-outside,該屬性定義了一個行內內容應該包裹的形狀。可以通過圖形函式來定義基本形狀。
shape-outside: circle(arg)//建立圓 shape-outside: polygon(arg); //建立多邊形 shape-outside: ellipse(arg);//建立橢圓 shape-outside: inset(arg);//建立矩形