css3中強大的filter 濾鏡 屬性

css3中強大的filter(濾鏡)屬性

1定義

filter，從字面意思來看就是濾鏡，官方定義filter屬性定義了元素(通常是

)的可視效果(例如：模糊與飽和度)；舉個栗子：

看到這個效果，博友們是不是都開始對filter開始感興趣了呢 ？

2語法

filter:none |blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

可以看到，屬性有很多可選值，他們都是什麼意思呢？

舉個栗子:

這裡用sepia調整

1

<
head
>
2<
meta 
charset
="utf-8"
>
3<
title
>title
title
>
4<
style
>
5.img 8
style
>
9head
>
10<
body
>
11<
img 
src="img/boke.png"
alt=""
>
12<
img 
class
="img"
src="img/boke.png"
alt=""
>
13body
>

3示例

下面，對filter屬性的其中幾個值做乙個示例，其他好玩的東西需要博友們一起發掘，有啥好玩的可以跟我一起分享喲

(1)hue-rotate(色彩旋轉)

1

<
style
>
2.img
5style
>
6head
>
7<
body
>
8<
img 
src="img/boke.png"
alt=""
>
9<
img 
class
="img"
src="img/boke.png"
alt=""
>
10body
>

(2)blur(模糊)

blur（模糊效果，單位px）　　　　

1

<
style
>
2.img
5style
>
7<
body
>
8<
img 
src="img/boke.png"
alt=""
>
9<
img 
class
="img"
src="img/boke.png"
alt=""
>
10body
>

(3)invert反色

<

style
>
.img
style
>
<
body
>
<
img 
src="img/boke.png"
alt=""
>
<
img 
class
="img"
src="img/boke.png"
alt=""
>
body
>

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 提示 若想在...

CSS3的濾鏡filter屬性

css3的濾鏡filter屬性，可以對網頁中的進行類似photoshop處理的效果，例如背景的毛玻璃效果 老 黑白 火焰效果等。注意 這個 drop shadow 與 box shadow 都是在說陰影，但還是有區別的，看下圖 圖中火焰的，是一張png，除了火焰以外，其他部分是透明的，我們能看見，b...