除了「形狀」相關的 CSS 函式可以搭配 CSS 的動畫或裁切效果，也可以透過「路徑」相關 CSS 函式 path()，繪製類似 SVG 曲線的效果，讓裁切的形狀或動畫路徑產生更多與眾不同的效果，這個單元會介紹如何繪製路徑，以及 path() 的用法。

影片重點：

• 00:00:56 認識 path
• 00:02:18 繪製路徑產生程式碼
• 00:03:14 使用 illustrator 繪製路徑
• 00:05:49 使用 VectorPea 繪製路徑
• 00:08:14 搭配 clip-path 裁切元素
• 00:11:43 搭配 clip-path 裁切元素 ( 搭配 url )
• 00:14:51 搭配 offset-path 產生動畫

相關參考：

• 教學文：CSS 路徑 path ( 函式類型 )
• 影片連結：https://www.youtube.com/watch?v=pcHpUppYCdg

後記

說到繪製向量圖，雖然我自己比較喜歡使用 illustrator，但對於許多國小、國中和高中而言，illustrator 不僅得安裝，部分學校甚至沒有教育版可以使用，因此大多數學校還是傾向使用自由軟體 Inkscape，而我為了做範例，更傾向「不要安裝」的線上版 VectorPea，不過 VectorPea 由於太過簡單，只能進行基本繪製，複雜的圖形效果仍然得透過其他工具操作 ( 不過 VectorPea 拿來把圖片轉換成向量圖很好用喔 )。

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html