什麼?? CSS也有濾鏡可以用! (CSS3 filter)
對用過photoshop或修圖軟體(APP)的人，對「濾鏡」這工能應該都不漠生， 想要快速的改變照片的風格，套用濾鏡一定是不二首選!!
其實CSS也是有濾鏡可以用噢!
## CSS3 filter
也就是CSS的濾鏡效果，
它可以對web中所元素進行渲染的較效果，
包含圖片、文字、區塊、表格...等 網頁元素都可以噢~
如果我們再配合上CSS3動畫時間、偽元素滑入(:hover)、JS事件...
就可以做出很多酷炫效果噢!
CSS3 Filter 屬性 10種濾鏡效果
● brightness 亮度
● contrast 對比
● saturate 飽和
● grayscale 灰階
● sepia 懷舊
● invert 負片
● hue-rotate 色相旋轉
● blur 模糊
● opacity 透明度
● drop-shadow影
brightness 亮度
img {
-webkit-filter: brightness(150%); /* Safari */
filter: brightness(150%);
}
單位：%
初始值100%，大於就變亮，小於就變暗
是不是簡單!!
contrast 對比
img {
-webkit-filter: contrast(150%); /* Safari */
filter: contrast(150%);
}
單位：%
初始值100%，大於對比變大，小於對比變小
saturate 飽和
img {
-webkit-filter: saturate(200%); /* Safari */
filter: saturate(200%);
}
單位：%
初始值100%，大於變鮮艷，小於彩度變低
grayscale 灰階
img {
-webkit-filter: grayscale(50%); /* Safari */
filter: grayscale(50%);
}
單位：%
初始值(最小值)0%，最大值100% (黑白灰階)
sepia 懷舊
img {
-webkit-filter: sepia(80%); /* Safari */
filter: sepia(80%);
}
單位：%
初始值(最小值)0%，最大值100% (棕褐色的懷舊風格)
invert 負片
img {
-webkit-filter: invert(80%); /* Safari */
filter: invert(80%);
}
單位：%
初始值(最小值)0%，最大值100% (負片)
hue-rotate 色相旋轉
img {
-webkit-filter: hue-rotate(90deg); /* Safari */
filter: hue-rotate(90deg);
}
單位：deg
初始值0deg，最大值360deg
就像在色相環調整角度那樣，直接用deg改變色相
blur 模糊
img {
-webkit-filter: blur(5px); /* Safari */
filter: blur(5px);
}
單位：px
初始值0px，沒有最大值
值越大就越模糊
opacity 透明度
img {
-webkit-filter: opacity(30%); /* Safari */
filter: opacity(30%);
}
單位：%
初始值100%，最小值0%
值越小就越透明
0%完全透明，只是看不見，但它還是存在畫面上
drop-shadow 下拉陰影
img {
-webkit-filter: drop-shadow(8px 8px 10px #000); /* Safari */
filter: drop-shadow(8px 8px 10px #000);
}
格式：(水平 垂直 模糊度 擴大 顏色)
水平/垂直(px)：設定陰影的位置
模糊度(px)：設定陰影模糊程度，值越大就越模糊
擴大(px)：設定陰影模糊放大的程度，一樣是值越大就越就越大
顏色(色碼)：設定陰影的顏色
它跟box-shadow陰影不太一樣，drop-shadow它會按照目標原始的內容去產生陰影
而box-shadow則是以區塊的方式來產生