html 測試 左單右單

html 測試 單入單出

html 測試 上入下出

html 測試 左入右出

2020年1月30日 星期四

CSS Filters濾鏡效果

CSS Filters濾鏡效果

CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。
 

blur 模糊 blur(0px) 0px 到100px,的百分比控制
sepia 懷舊 sepia(0) 0 or 1,1為元素轉換成黑白影像
invert 負片 invert(0) 0 or 1,1為元素轉換成負片影像
opacity 透明 opacity(1) 0 to 1,step 0.1 0為元素轉換成全透明影像
contrast 對比 contrast(0) 0 to 10, 10為明亮和陰暗部份的大差距
saturate飽和 saturate(0) 0 to 10, 10為元素轉換成最大飽和度
brightness 亮度 brightness(0) 0 to 10, 10為元素轉換成最大亮度度
grayscale 灰階 grayscale(0) 0 to 10, 10為元素轉換成最大灰階度
hue-rotate 色相旋轉 hue-rotate(0deg) 0deg – 360deg 旋轉色相環
drop-shadow 下拉陰影 drop-shadow(30px 10px 4px #4444dd) x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色
00
#CSS Filters濾鏡效果#html Filters濾鏡效果#blur 模糊#sepia 懷舊#invert 負片#opacity 透明#contrast 對比#saturate飽和#brightness 亮度#grayscale 灰階#hue-rotate 色相旋轉#drop-shadow 下拉陰影

沒有留言:

張貼留言