Copy & Paste CSS 教學：快速複製 CSS 樣式與網頁元件的免費工具

從複製貼上開始學習 HTML 與 CSS

應該有很多人跟我一樣剛開始學習 HTML、CSS 都是從複製貼上開始吧？記得早期會有一些架站教學網站，提供各式各樣範例程式碼，只要將程式碼複製到網頁就能實現相關功能，也讓學習的過程中增添不少成就感！當然後來就比較少用到這類網站，不過有需要時還是會習慣去查看原始碼，現今的瀏覽器內建開發人員工具真的非常方便好用。

Copy & Paste CSS：快速複製 CSS 樣式的免費工具

本文要介紹「Copy & Paste CSS」是一個收集網站元件、可快速複製貼上 CSS 樣式的免費服務，在這裡可以找到各種按鈕、容器陰影（Box-shadows）、表單輸入欄位、調色盤和表情符號，這些元件都會直接顯示於網頁，點選就能將 CSS 複製到剪貼簿使用。

比較有趣的是這裡收錄的元件風格來自一些知名的開發框架或網路服務，例如 Bootstrap、GitHub、Carbon（IBM）、Mailchimp、Material Design、Tailwindcss、Fluent UI（Microsoft），如果有興趣還能從網站提供的鏈結去找到完整的設計系統說明。

使用教學：如何快速複製 CSS 樣式

操作步驟

選擇網頁元件類別

開啟 Copy & Paste CSS 網站後從上方切換不同的網頁元件類別，例如：按鈕、容器陰影、表單輸入欄位、調色盤和表情符號 Emojis。

預覽並複製 CSS 樣式

每個元件都會顯示於網頁上，包括它的顏色、樣式和框架或是網路服務名稱，例如在按鈕部分就可以看到各種風格，將游標移動上去後還可以看到變化，點選一下按鈕「Copy CSS」即可複製樣式。

在容器陰影（Box-shadows）會看到各種陰影呈現的實際效果，一樣可以快速點選、複製，有部分會標示「Design System」可連結到這個設計系統的首頁，例如 Google 開發、知名的 Material Design或是微軟開發的 Fluent UI 都有對應的設計體系頁面提供完整詳細說明。

在表單輸入欄位部分也有不同變化，如果想要把它複製到自己的專案開發，一樣可以點選、快速複製程式碼。

確認複製成功

點選後上方就會顯示 CSS Copied! 訊息表示已將樣式複製到剪貼簿。

探索調色盤與表情符號

除此之外，Copy & Paste CSS 還收錄各種調色盤（網路服務或開發框架會用到的色彩），也有快速複製表情符號的功能，但就不同於前面提到的網頁元件功能，有興趣的朋友可以玩玩看。