1. 黑白影像

這段程式碼會將彩色照片變為黑白照片

2. 使用 :not() 在選單上應用/取消邊框

該程式碼用在導航選單非常的實用。

先給每一個選單項新增邊框：

然後再去除最後一個元素的邊框：

現在可以使用:not()偽類來實現了：

web前端JavaScript技術學習群640633433

3. 頁面頂部陰影

下面這個簡單的 CSS3 程式碼片段可以給網頁加上漂亮的頂部陰影效果：

4. 給 body 新增行高

你不需要分別新增 line-height 到每個p,h標記等。只要新增到 body 即可：

這樣文字元素就可以很容易地從 body 繼承。

5. 所有一切都垂直居中

要將所有元素垂直居中，太簡單了：

6. 逗號分隔的列表

讓HTML列表項看上去像一個真正的，用逗號分隔的列表：

7. 使用負的 nth-child 選擇專案

在CSS中使用負的 nth-child 選擇專案1到專案n：

8. 對圖示使用 SVG

我們沒有理由不對圖示使用SVG：

9. 優化顯示文字

有時，字型並不能在所有裝置上都達到最佳的顯示，所以可以讓裝置瀏覽器來幫助你：

10. 對純 CSS 滑塊使用 max-height

使用 max-height 和溢位隱藏來實現只有CSS的滑塊：

11. 繼承 box-sizing

讓 box-sizing 繼承 html：

12. 表格單元格等寬

表格工作起來很麻煩，所以務必儘量使用 table-layout: fixed 來保持單元格的等寬：

13. 用 Flexbox 擺脫外邊距的各種 hack

當需要用到列分隔符時，通過flexbox的 space-between 屬性，你就可以擺脫nth-，first-，和 last-child 的hack了：

14. 使用屬性選擇器用於空連結

當a元素沒有文字值，但 href 屬性有連結的時候顯示連結：

15. 檢測滑鼠雙擊

HTML：

CSS：

16. CSS 寫出三角形

17. CSS3 calc() 的使用

calc() 用法類似於函式，能夠給元素設定動態的值：

18. 文字漸變

文字漸變效果很流行，使用 CSS3 能夠很簡單就實現：

19. 禁用滑鼠事件

CSS3 新增的 pointer-events 讓你能夠禁用元素的滑鼠事件，例如，一個連結如果設定了下面的樣式就無法點選了。

20. 模糊文字

簡單但很漂亮的文字模糊效果，簡單又好看：

就寫到這裡了，想要自己學習練手的小夥伴進我的群自助領取，已經上傳到學習群裡了：640633433，歡迎初學和進階中的小夥伴。

望通過上面的學習，對大家有所幫助！