這篇文章主要介紹常用的CSS技巧有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯建站服務項目包括玉泉網站建設、玉泉網站制作、玉泉網頁制作以及玉泉網絡營銷策劃等。多年來，我們專注于互聯網行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯網行業(yè)的解決方案，玉泉網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到玉泉省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

1.黑白圖像

這段代碼會讓你的彩色照片顯示為黑白照片，是不是很酷？

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

先給每一個菜單項添加邊框

……然后再除去***一個元素……

……可以直接使用:not()偽類來應用元素：

這樣代碼就干凈，易讀，易于理解了。

當然，如果你的新元素有兄弟元素的話，也可以使用通用的兄弟選擇符（~）：

3.頁面頂部陰影

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

4.給body添加行高

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

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

5.所有一切都垂直居中

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

看，是不是很簡單。

注意：在IE11中要小心flexbox。

6.逗號分隔的列表

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

對***一個列表項使用:not()偽類。

7.使用負的nth-child選擇項目

在CSS中使用負的nth-child選擇項目1到項目n。

8.對圖標使用SVG

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

SVG對所有的分辨率類型都具有良好的擴展性，并支持所有瀏覽器都回歸到IE9。這樣可以避開.png、.jpg或.gif文件了。

9.優(yōu)化顯示文本

有時，字體并不能在所有設備上都達到***的顯示，所以可以讓設備瀏覽器來幫助你：

注：請負責任地使用optimizeLegibility。此外，IE/Edge沒有text-rendering支持。

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

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

11.繼承box-sizing

讓box-sizing繼承html：

這樣在插件或杠桿其他行為的其他組件中就能更容易地改變box-sizing了。

12.表格單元格等寬

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

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

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

現在，列表分隔符就會在均勻間隔的位置出現。

14.使用屬性選擇器用于空鏈接

當a元素沒有文本值，但href屬性有鏈接的時候顯示鏈接：

相當方便。

15.檢測鼠標雙擊

HTML：

CSS：

16.CSS 寫出三角形

利用border來寫三角形代碼，并且兼容IE6.

17.CSS3 calc() 的使用

calc()用法類似于函數，能夠給元素設置動態(tài)的值：

18.文本漸變

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

19.禁用鼠標事件

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

20.模糊文本

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

以上是“常用的CSS技巧有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道！