這些css高階技巧,你知道幾個呢
阿新 • • 發佈:2018-12-25
1. 黑白影象
2. 使用 :not() 在選單上應用/取消邊框
該程式碼用在導航選單非常的實用。
先給每一個選單項新增邊框:
然後再去除最後一個元素的邊框:
現在可以使用:not()偽類來實現了:
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. 模糊文字
簡單但很漂亮的文字模糊效果,簡單又好看: