帶你瞭解樣式表濾鏡(一)

來源:互聯網
上載者:User
濾鏡|樣式表   使用樣式表的人,都會對濾鏡產生深刻的印象。這是因為我們在編寫網頁的時候,即使我們不用圖片,通過樣式表濾鏡,只需簡單的操作,也同樣可以使我們的文字,圖片或者按鈕鮮豔無比,充滿生氣,從而增強了自己網頁的視覺效果。也許正是那些光怪陸離的濾鏡,激發了許多人的興趣和熱情,樣式表也因此贏得了眾多網頁製作者的青睞。那麼,濾鏡是什麼呢?簡單的說吧,它們是一些程式,能夠對對象進行複雜的計算,獲得常規操作難以實現的“專業”效果。

  從IE 4.0版開始,瀏覽器就提供了一些內建的多媒體濾鏡特效,網頁設計師們正是利用這些樣式表濾鏡的控制,才很輕鬆地做出了漂亮的網頁。即使你完全不懂樣式表這方面的知識,筆者相信下面要敘述的內容你也不難掌握的。但有一個前提,那就是你必須稍微瞭解一點HTML文法知識,最好還能知道一點有關指令碼語言方面的知識。考慮到各種瀏覽器對樣式表的支援方面的因素,筆者建議你使用IE4.0以上版本的瀏覽器,這樣的話,你就會毫不費力地看到所有的特效。



一、樣式表濾鏡的構成
  濾鏡作為樣式表大家庭中的一員,它跟其他樣式表元素的定義和應用方式當然是一樣的,能夠直接定義在HTML標識的<head>和</head>只間。樣式表濾鏡的基本文法為:

標記{FILTER : 濾鏡名(屬性名稱1=屬性值1,屬性名稱2=屬性值2,....);}

它所表達的意思是:在該標記範圍內的內容,樣式表濾鏡將按照小括弧內的屬性名稱所限定的對象,按屬性值所設定的數值進行特效處理。其中標記為HTML文法中的任意標記,如span,p,br等等;濾鏡名就是我們下面所涉及到的14種濾鏡名稱;每一種濾鏡它都有自己特定的屬性名稱及其屬性值。

例如:p { filter : alpha(opacity=80,style=1 ); }

以上就是使用樣式表濾鏡的定義方法。



二、靜態濾鏡的種類
  在IE4.0以上版本瀏覽器中,支援以下14種樣式表濾鏡:

濾鏡名                   說明

Alpha            讓對象呈現漸層半透明效果

Blur             讓對象產生風吹模糊的效果

DropShadow       讓對象有一個下落式的陰影

Glow            在對象的周圍產生光暈而模糊的效果

Chroma          讓映像中的某一顏色變成透明色

FlipH            讓HTML對象水平轉換

FlipV            讓HTML對象垂直轉換

Wave           讓HTML對象產生水平或是垂直方向上的正弦波形

Shadow          讓對象產生陰影製作效果

Mask           利用一個HTML對象在另一個對象上產生映像的遮罩

Light            在HTML元件上放置一個光影

Gray            把一個彩色的圖象變成灰色調圖象

Invert           讓對象產生照片底片的效果

XRay           讓對象輪廓反白

  這些濾鏡就像是PhotoShop這一類影像處理軟體所提供的特效一樣,有了這些特效,你就可以直接在HTML中對圖片進行特效處理了,而不用再用專門的圖片處理軟體編輯圖片了。樣式表濾鏡不僅對圖象起作用,同時也適用於文本;在這裡筆者為方便敘述,暫用文本作為例子來談談濾鏡的參數及其作用。



三、濾鏡的參數及其作用
1、Alpha 濾鏡
  文法:{FILTER:ALPHA(opacity=屬性值1,finishopacity=屬性值2,style=屬性值3,startx=屬性值4,starty=屬性值5,finishx=屬性值6,finishy=屬性值7)}

  作用:該濾鏡能夠使對象呈現漸層半透明效果,其效果是由小括弧中的各屬性名稱及其對應的屬性值決定。

  參數:Opacity 屬性是設定不透明的程度,用百分比表示其屬性值,大小是從0到100,0表是完全透明,100表示完全不透明。

  FinishOpacity 屬性是一個同Opacity一起使用的選擇性的參數,當同時設定Opacity和FinishOpacity時,可以製作出透明漸進的效果;其屬性值也是從0到100,0表是完全透明,100表示完全不透明。

  Style屬性是用來設定漸層風格的,當同時設定了Opacity和finishOpacity產生透明漸進時,它主要是用來指定漸進的顯示形狀,0代表均勻漸進;1代表線形漸進;2代表放射漸進;3代表直角漸進。

  StartX 屬性是用來設定水平方向漸進的起始位置。

  FinishX屬性是用來設定水平方向漸進的結束位置。

  FinishY屬性是用來設定豎直方向漸進的結束位置。

  執行個體:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>樣式表濾鏡執行個體</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }p {filter:alpha(opacity=80,style=0,starX=2,finishX=4);}

-->

</style>

</head>

<body>

<p>樣式表濾鏡執行個體</p>

</body>

</html>



2、BLUR濾鏡
  文法:{filter:blur(add=屬性值1,direction=屬性值2,strength=屬性值3);}

  作用:該濾鏡能夠使對象表現一種模糊的效果,其效果是由小括弧中的各屬性名稱及其對應的屬性值決定。

  參數:add屬性是用來確定是否在移動模糊中使用原有目標,其屬性值有0和1兩種,0屬性值意思是在模糊運動中不使用原有目標,大多數情況下適用於圖象;1屬性值代表在模糊運動中使用原有目標,大多數情況下適用於文本。

  direction屬性是用來表示模糊移動時的角度,其屬性值為0到360度。

  strength屬性是用來表示模糊移動時的距離,該屬性值一般可以任意設定。

  執行個體:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>樣式表濾鏡執行個體</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:blur(add=1,direction=60,strength=2);}

-->

</style>

</head>

<body>

<p>樣式表濾鏡執行個體</p>

</body>

</html>



3、DropShadow 濾鏡
  文法:{filter:dropshadow(color=屬性值1,offx=屬性值2,offy=屬性值3,positive=屬性值4);}

  作用:該濾鏡主要是用來產生重疊效果的,其效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的。

  參數:COLOR屬性是用來設定投影文字的顏色。

  offX屬性是代表投影文字與原文字之間水平方向上的位移量。

  offY屬性是代表投影文字與原文字之間垂直方向上的位移量。

  positive屬性是一個布爾值(0或者1),如果為“TRUE(非0)”,那麼就為任何的非透明像素建立可見的投影;如果為“FASLE(0)”,那麼就為透明的像素部分建立透明效果。

  執行個體:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<title>樣式表濾鏡執行個體</title>

<style>

<!--

p { color: #FF0000; font-size: 36pt; text-decoration: blink; font-weight: bold }

p {filter:dropshadow(color=#ff0080,offX=2,offY=2,positive=0);color:#00ff11}

-->

</style>

</head>

<body>

<p>樣式表濾鏡執行個體</p>

</body>

</html>

相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。