CSS 查看插件是前端開發中非常有用的工具。通過它，我們可以方便地檢查網頁元素的 CSS 屬性，快速了解頁面樣式的實現方式，從而更好地調試和優化代碼。 推薦幾個常用的 CSS 查看插件： 1. Chrome DevTools Google Chrome 瀏覽器自帶的開發者工具（DevTools）中，有一個 Elements 選項卡，可以查看當前頁面的 DOM 樹結構和 CSS 屬性。在該選項卡下方的 Styles 面板中，可以查看選中元素的所有 CSS 屬性，并實時編輯和預覽修改后的樣式效果。 2. Firebug Firebug 是火狐瀏覽器的一個開發者工具，可以方便地查看網頁元素的 HTML 結構和 CSS 屬性。使用 Firebug，我們可以實時編輯 CSS 屬性并預覽效果，快速定位樣式問題并進行調試。 3. Web Developer Web Developer 是一款非常全面的瀏覽器插件，其中包含了很多實用的工具和功能，包括查看頁面元素的 CSS 屬性。選擇該插件的 Outline 選項，可以顯示出當前頁面的所有元素和 CSS 屬性，便于快速了解頁面的結構和樣式實現。 以上是幾個常用的 CSS 查看插件，使用它們可以讓我們更加輕松地進行前端開發和調試工作。在實際應用中，我們可以根據自己的喜好和習慣選擇適合自己的插件，以提高工作效率和代碼質量。 以下是一個使用 CSS3 動畫制作的簡單演示，可以使用上述插件查看其 CSS 屬性：

html {
height: 100%;
}
body {
height: 100%;
margin: 0;
background: linear-gradient(to right, #f00, #00f);
animation: rainbow 4s linear infinite;
}
@keyframes rainbow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 100% 50%;
}
}

該演示利用linear-gradient獲取了從紅色到藍色的漸變顏色，并使用animation屬性使背景顏色在 4 秒鐘內循環播放。使用插件可以查看到該演示的各種 CSS 屬性及其值的詳情。