css3屬性 -webkit-filter
-webkit-filter是css3的一個屬性,Webkit率先支持了這幾個功能,感覺效果很不錯。下面咱們就學習一下filter這個屬性吧。
現在規範中支持的效果有:
- grayscale 灰度 值爲0-1之間的小數
- sepia 褐色 值爲0-1之間的小數
- saturate 飽和度 值爲num
- hue-rotate 色相旋轉 值爲angle
- invert 反色 值爲0-1之間的小數
- opacity 透明度 值爲0-1之間的小數
- brightness 亮度 值爲0-1之間的小數
- contrast 對比度 值爲num
- blur 模糊 值爲length
- drop-shadow 陰影
用法是標準的CSS寫法,如:
-webkit-filter: blur(2px); 我試着寫了幾個小效果,大家可以對比着看一下:
無效果 -webkit-filter:none;
模糊 -webkit-filter:blur(3px)
灰度 -webkit-filter:grayscale(0.5)
亮度 -webkit-filter:brightness(0.5)
對比度 -webkit-filter:contrast(2.6)
飽和度 -webkit-filter:saturate(7.9)
色相旋轉 -webkit-filter:hue-rotate(260deg)
反色 -webkit-filter:invert(0.9)
陰影 -webkit-filter:drop-shadow(10px 10px 10px #000)