以下為語音合成的文章,請忽略其中的部分語法錯誤
CSS3的Polygon屬性讓我們在網頁中創建出與眾不同的形狀,為網頁添加立體感和趣味性的同時又不會讓頁面顯得過于繁瑣。Polygon參數較多,但基本上可以通過以下幾個屬性來掌握這一技能。
clip-path: polygon()
clip-path為裁切屬性,而polygon為其裁切形狀。此屬性需要在元素中指定填充,以觸發剪輯。裁剪形狀屬于SVG遵循相同的語法。
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
此屬性和語法用于入門級別的網絡設計師和開發人員。在上面的例子中,將四個坐標作為參數傳遞給polygon,每個坐標代表多邊形的一個角。在這種情況下,一個多邊形是一個菱形。
clip-path: polygon(50% -20px, 100% 0, 100% 100%, 50% calc(100% + 20px), 0 100%, 0 0);
當然,復雜的多邊形也可以通過不同的坐標組進行定義。在此例中,我們將創建一個六邊形。要創建此形狀,我們需要提供六個點,這些點永遠不是機器中默認的點。這個基本的多邊形可以通過調整其中的一些參數來制作自定義多邊形,可以非常有趣。
上一篇css3 hover動
下一篇id vue 運算