CSS 濾鏡技巧與細節

本文主要介紹 CSS 濾鏡的不經常使用用法，但願能給讀者帶來一些乾貨！spa

注意：ie不兼容code

本文所描述的濾鏡，指的是 CSS3 出來後的濾鏡，不是 IE 系列時代的濾鏡，話很少說，直接開車，語法以下：blog

{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%);
 
    /* Apply multiple filters */ filter: contrast(175%) brightness(3%);
 
    /* Global values */ filter: inherit; filter: initial; filter: unset;
}

基本用法

先簡單看看幾種濾鏡的效果圖片

你能夠經過 hover 取消濾鏡，觀察該濾鏡的效果。ip

簡單來講，CSS 濾鏡就是提供相似 PS 的圖形特效，像模糊，銳化或元素變色等功能。一般被用於調整圖片，背景和邊界的渲染。ci

經常使用用法

既然是標題是你所不知道的技巧與細節，那麼比較經常使用的一些用法就再也不贅述，一般咱們見得比較多的 CSS 濾鏡用法有：it

使用 filter: blur() 生成毛玻璃效果
使用 filter: drop-shadow() 生成總體陰影效果
使用 filter: opacity() 生成透明度