關注前端開發
關注用戶體驗

初識 CSS Shapes

先來看以下效果:右側文本環圓環排版。

在未了解css shapes之前,實現這樣的排版還是挺費事的,比如為每行設置不同的padding值。但是有了css shapes之后,兩行css就搞定啦,一起來看看吧。

 

See the Pen 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);??//創建矩形
贊(34)
未經允許不得轉載:大前端 » 初識 CSS Shapes
分享到: 更多 (0)

themebetter 國內更好的WordPress主題服務商

立即前往
广东26选5复式计算