本文為大家分享了20個非常實用的CSS技巧，供大家參考，具體內容如下

1. 黑白圖像

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

CSS Code復制內容到剪貼板

img.desaturate {   
    filter: grayscale(100%);   
    -webkit-filter: grayscale(100%);   
    -moz-filter: grayscale(100%);   
    -ms-filter: grayscale(100%);   
    -o-filter: grayscale(100%);   
}   
  

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

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

CSS Code復制內容到剪貼板

/* add border */  
.nav li {   
  border-right: 1px solid #666;   
}   
……然后再除去最后一個元素……   
  
// remove border /   
  
.nav li:last-child {   
  border-right: none;   
}   
……可以直接使用 :not() 偽類來應用元素：   
  
.nav li:not(:last-child) {   
  border-right: 1px solid #666;   
}   

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

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

CSS Code復制內容到剪貼板

..nav li:first-child ~ li {   
  
  border-left: 1px solid #666;   
}   
  

3. 頁面頂部陰影

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

CSS Code復制內容到剪貼板

body:before {   
          content: "";   
          position: fixed;   
          top: -10px;   
          left: 0;   
          width: 100%;   
          height: 10px;   
    
          -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);   
          -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);