css3如何實作圖檔濾鏡效果？其實很簡單css3 filter屬性就可以實作好幾種濾鏡效果。本篇文章就給大家介紹css3 filter屬性可以實作的濾鏡效果有哪些，這些圖檔濾鏡效果是如何實作的。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。
首先，我們先建立一個demo，代碼如下：
css3 filter濾鏡
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
效果是這樣的(沒有加任何濾鏡效果)：
下面我們來看看css3 filter濾鏡屬性可以實作的圖檔濾鏡效果：
1、css3 圖檔模糊濾鏡效果
隻需要加人以下css代碼：.demo img{
filter: blur(2px);
}
效果圖：
考慮到浏覽器的相容性，我們可以添加一條語句：.demo img{
-webkit-filter: blur(2px);
filter: blur(2px);
}
2、css3濾鏡---brightness(%)設定圖檔亮度.demo img{
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
效果圖：
.demo img{
-webkit-filter: brightness(150%);
filter: brightness(150%);
}
效果圖：
3、css3濾鏡---contrast(%)設定圖檔對比度.demo img{
-webkit-filter: contrast(50%);
filter: contrast(50%);
}
效果圖：
.demo img{
-webkit-filter: contrast(150%);
filter: contrast(150%);
}
效果圖：
4、css3濾鏡---drop-shadow()設定圖檔陰影.demo img{
-webkit-filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
filter: drop-shadow(10px 10px 10px rgba(0,0,0,.5));
}
效果圖：
說明：filter:drop-shadow(h-shadow v-shadow blur spread color);
h-shadow：設定陰影的水準方向偏移量，負值會使陰影出現在元素左邊。
v-shadow：設定陰影的垂直方向偏移量，負值會使陰影出現在元素上方。
blur：設定模糊度，值越大，越模糊，則陰影會變得更大更淡；不允許負值 若未設定，預設是0 (則陰影的邊界很銳利)。
spread：正值會使陰影擴張和變大，負值會是陰影縮小；若未設定，預設是0 (陰影會與元素一樣大小)。注：Webkit, 以及一些其他浏覽器 不支援spread，如果加了也不會渲染。
color：設定陰影顔色；若未設定，顔色值基于浏覽器。
5、css3濾鏡---grayscale(%)設定圖檔灰階.demo img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
效果圖：
6、css3濾鏡---hue-rotate(deg)設定圖檔色相旋轉.demo img{
-webkit-filter: hue-rotate(90deg);
filter: hue-rotate(90deg);
}
效果圖：
7、css3濾鏡---invert(%)設定圖檔反色.demo img{
-webkit-filter: invert(100%);
filter: invert(100%);
}
效果圖：
8、css3濾鏡---opacity(%)設定圖檔透明度.demo img{
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
效果圖：
9、css3濾鏡---saturate(%)設定飽和度.demo img{
-webkit-filter: saturate(50%);
filter: saturate(50%);
}
效果圖：
10、css3濾鏡---sepia(%)設定圖檔褐色(有種複古的舊照片感覺).demo img{
-webkit-filter: sepia(50%);
filter: sepia50%);
}
效果圖：
總結：以上就是本篇文的全部内容，希望能對大家的學習有所幫助。更多相關教程請通路CSS基礎視訊教程，CSS3視訊教程，bootstrap視訊教程！