初識 CSS Shapes

摘要： 先來看以下效果：右側文字環圓環排版。 在未了解css shapes之前，實現這樣的排版還是挺費事的，比如為每行設定不同的padding值。但是有了css shapes之後，兩行css就搞定啦，一起來看看吧。 See the Pen css-shapes by cc ( @g...

先來看以下效果：右側文字環圓環排版。

在未了解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);//建立矩形