css3中Filter的十種特效

2021-10-23 08:28:58 字數 657 閱讀 8225

css3的filter屬性簡單且強大,本篇是學習css3 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 陰影;

一、灰度

.grayscale

二、褐色

.sepia

三、飽和度

.saturate

四、色相翻轉

.hue-rotate

五、反色

.invert

六、透明度

.opacity

七、亮度

.brightness

八、對比度

.contrast

九、模糊

.blur

十、陰影

.drop-shadow

CSS3 Filter的十種特效

filters主要是運用在上,以實現一些特效。儘管他們也能運用於video上 不過我們在些只來討論上的運用。語法elm其預設值是none,他不具備繼承性,其中filter function乙個具有以下值可選 grayscale灰度 sepia褐色 求專業指點翻譯 saturate飽和度 hue ro...

css3中filter的各種特效

css3中的filter屬性可以說是簡單易用且強大,這些效果作用在上實現一些特效 也可以作用在vidio上,此處只討論特效 瀏覽器相容性 目前各大瀏覽器對於css3的相容已經非常好了,最新版本都可以支援css3,老版本的ie9以下的還是不支援,不過這不是重點,微軟都準備放棄這些老古董了。另外ie的濾...

關於 CSS3 中的 filter 濾鏡 屬性

filter屬性定義了元素 通常是 的可視效果 例如 模糊與飽和度 css語法 filter none blur brightness contrast drop shadow grayscale hue rotate invert opacity saturate sepia url 提示 若想在...