SnipCSS 提取與網(wǎng)頁任何部分相關(guān)的所有 CSS 樣式。它適用于所有網(wǎng)站，點(diǎn)擊幾下后，您將獲得與您試圖重新創(chuàng)建的網(wǎng)站部分相關(guān)聯(lián)的 CSS、HTML 和圖像。

您在 Web 上看到的任何酷炫設(shè)計(jì)都可以成為您快速制作原型的個(gè)人模板！

========================================

如果您嘗試通過手動(dòng)復(fù)制/粘貼來執(zhí)行相同的操作，則可能需要 20 分鐘，但使用 SnipCSS，您可以在一分鐘內(nèi)選擇并獲取所有樣式，包括帶有媒體查詢的樣式。我什至在我自己在其他項(xiàng)目中創(chuàng)建的網(wǎng)站部分使用它，因此我可以獲得快速可重用的 HTML/CSS 組件以插入我的新項(xiàng)目。

與其他使用“計(jì)算樣式”的 CSS 提取器擴(kuò)展不同，SnipCSS 使用 Chrome DevTools 協(xié)議。就像當(dāng)您使用 devtools 時(shí)您會(huì)看到相關(guān)樣式的列表一樣，SnipCSS 會(huì)為 DOM 片段子樹中的每個(gè)元素重建該列表。

下載設(shè)計(jì)所需的所有圖像、字體和其他所有內(nèi)容，您可以輕松地將所有文件導(dǎo)出到一個(gè) zip 文件中。

專業(yè)版推出！

========================================

使用專業(yè)版從多種分辨率或多種元素中獲取 CSS！還為 Pro 會(huì)員添加了高級(jí)功能，如無沖突 CSS 類、范圍界定、刪除不必要的屬性/類以及創(chuàng)建項(xiàng)目的子選擇。

1.7.0 版增加了使用 ChatGPT 將您的代碼片段轉(zhuǎn)換為 React/Vue 模板的功能。
片段的模板版本將 Lorem Ipsum 數(shù)據(jù)注入到 html 中，因此自動(dòng)替換受版權(quán)保護(hù)的圖像/文本。您還可以使用 Stable Diffusion 替換 HTML 中的圖像。生成 AI 功能需要一個(gè)免費(fèi)的 SnipCSS 帳戶。

插件安裝方法

方法一：.crx文件格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序或直接輸入：chrome://extensions/

3.找到自己已經(jīng)下載好的Chrome離線安裝文件xxx.crx，然后將其從資源管理器中拖動(dòng)到Chrome的擴(kuò)展管理界面中，這時(shí)候用戶會(huì)發(fā)現(xiàn)在擴(kuò)展管理器的中央部分中會(huì)多出一個(gè)”拖動(dòng)以安裝“的插件按鈕。

4.松開鼠標(biāo)就可以把當(dāng)前正在拖動(dòng)的插件安裝到谷歌瀏覽器中去，但是谷歌考慮用戶的安全隱私，在用戶松開鼠標(biāo)后還會(huì)給予用戶一個(gè)確認(rèn)安裝的提示。

5.用戶這時(shí)候只需要點(diǎn)擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去，安裝成功以后該插件會(huì)立即顯示在瀏覽器右上角（如果有插件按鈕的話），如果沒有插件按鈕的話，用戶還可以通過Chrome擴(kuò)展管理器找到已經(jīng)安裝的插件。

方法二：文件夾格式插件安裝

1.首先用戶點(diǎn)擊谷歌瀏覽器右上角的自定義及控制按鈕，在下拉框中選擇設(shè)置。

2.在打開的谷歌瀏覽器的擴(kuò)展管理器最左側(cè)選擇擴(kuò)展程序。

3.勾選開發(fā)者模式，點(diǎn)擊加載已解壓的擴(kuò)展程序，將文件夾選擇即可安裝插件。

如果你在安裝過程中出現(xiàn)下圖中的錯(cuò)誤程序包無效 CRX_HEADER_INVALID

可以參考：超詳細(xì)的Chrome 瀏覽器/瀏覽器插件安裝教程(全方法) 一文解決