1.黑白圖像此代碼將使您的彩色照片顯示為黑白照片。這很酷嗎？ Img.desaturate {filter: grayscale（100％）; - webkit-filter: grayscale（100％）; - moz-filter: grayscale（100％）; - ms-filter: grayscale（100％）; - o-filter:灰度（100％）;

}

2.頁面頂部下方的簡單css3代碼片段可以為頁面添加一個漂亮的頂部陰影效果：在{content:''之前的主體:固定位置:頂部: -10px;左邊: 0;寬度: 100％ ;高度: 10px; -webkit-box-shadow: 0px 0px 10px rgba（0,0,0，8）; - moz-box-shadow: 0px 0px 10px rgba（0,0,0，8）; box-陰影: 0px 0px 10px rgba（0,0,0，8）; z-index: 100;

}

3.一切都垂直居中，垂直居中所有元素，太簡單了：html，body {height: 100％; margin: 0;} body {-webkit-align-items: center; -ms-flex-align: Center; align-items: center; display: -webkit-flex; display: flex;

}

注意：在IE11中要小心使用flexbox。

4.文本漸變文本漸變效果非常流行，可以使用CSS3輕松實現(xiàn)：h2 [data-text] {position: relative;} h2 [data-text]: {content: attr（data-text）; z -index: 10;顏色:＃e3e3e3;位置:絕對;頂部: 0;左: 0; -webkit-mask-image: -webkit-gradient（線性，左上，左下，來自（rgba（0,0， 0,0）），顏色停止（50％，rgba（0,0,0,1）），到（rgba（0,0,0,0）））;

}

5.禁用鼠標事件CSS3新的指針事件允許您禁用元素的鼠標事件。例如，如果設置了以下樣式，則無法單擊連接。disabled {pointer-events: none;

}

6.模糊文字簡單但文字模糊效果非常漂亮，簡潔美觀！blur {color: transparent; text-shadow: 0 0 5px rgba（0,0,0,0.5）;}