CSS擴展濾鏡屬性及語法

CSS濾鏡:

1.Alpha濾鏡

語法:

Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

代碼:

<font style="font-size:30pt;filter:alpha(opacity=100,style=3);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

從效果中我們可以看出,Alpha濾鏡使對象呈漸變透明的效果,其效果是由腳本中的filter:alpha(opacity=100,style=3)來決定的。其中:

opacity屬性:設置透明度,取值0至100之間的任意數值,100表示完全不透明; style屬性:設置漸變風格,0表示均勻漸變,1表示線性漸變,2表示放射漸變,3表示直角漸變。

而width:100%則表示參與漸變的對象的寬度,通常都設置爲100%。

2. Blur濾鏡

語法:

Blur(Add=?, Direction=?, Strength=?)

Motion Blur濾鏡表現的是一種模糊效果。其ADD屬性是用來確定是否在運動模糊中使用原有目標,其值爲0和1,0表示“否”,用于文字,1表示“是”,用于圖像;Direction屬性是模糊移動的角度,其值爲0至360度;Strength屬性是模糊移動的距離。

代碼:

<font style="font-size:30pt;filter:blur(add=1,direction=30,strength=5);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

3.Chroma 濾鏡

語法:

{filter:chroma(color=color)}

使用”Chroma"屬性可以設置一個對象中指定的顔色爲透明色,參數COLOR即要透明的顔色。

4.Drop Shadow濾鏡

語法:

DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Drop Shadow濾鏡主要産生重疊效果。其屬性爲:

color屬性:設置影子文本的顔色;

offX和offY屬性:影子文本下落的位移值;

Positive屬性:指定透明象素陰影,布爾型,0爲是,1爲否。

代碼:

<font style="font-size:30pt;filter:dropshadow(color=lightgreen,offx=5,offy=3,positive=1);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

5.Flip濾鏡

Flip濾濾鏡主要是産生兩種變換效果,即上下變換和左右變換。FlipV産生上下變換,FlipH産生左右變換。

代碼:

<font style="font-size:30pt;filter:flipv(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

<p align=right><font style="font-size:30pt;filter:fliph(color=silver);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font></p>

6.Glow濾鏡

語法:

Glow(Color=?, Strength=?)

Glow濾鏡生成一種光暈效果。屬性:

color屬性:光暈顔色;strength:光暈的厚度。

代碼:

<font style="font-size:30pt;filter:glow(color=gray,strength=4);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

7.Light 濾鏡

這個屬性模擬光源的投射效果。一旦爲對象定義了“LIGHT"濾鏡屬性,那麽就可以調用它的“方法(Method)"來設置或者改變屬性。“LIGHT"可用的方法有:

·AddAmbient 加入包圍的光源

·AddCone 加入錐形光源

·AddPoint 加入點光源

·Changcolor 改變光的顔色

·Changstrength 改變光源的強度

·Clear 清除所有的光源

·MoveLight 移動光源

可以定義光源的虛擬位置,以及通過調整X軸和Y軸的數值來控制光源焦點的位置,還可以調整光源的形式(點光源或者錐形光源)指定光源是否模糊邊界、光源的顔色、亮度等屬性。如果動態的設置光源,可能回産生一些意想不到的效果。

8.Shadow濾鏡

語法:

Shadow(Color=?, Direction=?)

與Drop Shadow的影子特性不同,Shadow濾鏡産生一種陰影效果,它的屬性比較簡單:

color屬性:陰影顔色;

direction屬性:陰影角度,值取0至360度。

代碼:

<font style="font-size:30pt;filter:shadow(color=black,direction=180);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

9.Wave濾鏡

語法:

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

此濾鏡對過濾對象生成正弦波變形,造成一種變幻效果。內嵌屬性:

add屬性:布爾型,0或1,0表示將原始對象加入最後效果中,1則反之;

freq屬性:決定顯示的頻率,即應出現多少個波形;

phrase屬性:決定波形的形狀,值取0至360之間;

strength屬性:決定波形的振幅。

代碼:

<font style="font-size:30pt;filter:wave(add=0,lightstrength=50,strength=4,freq=2,phrase=30);width:100%; color:red;line-height:150%;font-family:華文行楷"><b>CSS濾鏡實例</b></font>

10.Gray ,Invert,Xray 濾鏡

語法:

{filter:gray} ,{filter:invert},{filter:xray}

Gray濾鏡是把一張圖片變成灰度圖;Invert濾鏡是把對象的可視化屬性全部翻轉,包括色彩、飽和度、和亮度值;Xray濾鏡是讓對象反映出它的輪廓並把這些輪廓加亮,也就是所謂的“X”光片。

代碼:

提示:CSS濾鏡還經常用來修飾圖像。比如用Flip濾鏡,就可以使圖像倒過來顯示。最後請注意:要使用CSS濾鏡,只有在HTML編輯模式下編輯發布才有效果。

CSS語法手冊文本屬性
    1、letter-spacing  功能:控制文本元素字母間的間距,所設置的距離適用于整個元素。  數值:  normal - 正常間距,將字符間的間距複位爲所有字體和字號的正常間距。  長度 - 設置字間距長度,正值表...查看完整版>>CSS語法手冊文本屬性
 
Css中的filter常用濾鏡屬性及語句大全
濾鏡說明:Alpha:設置透明層次.blur:創建高速度移動效果,即模糊效果.Chroma:制作專用顔色透明.DropShadow:創建對象的固定影子.FlipH:創建水平鏡像圖片.FlipV:創建垂直鏡像圖片.glow:加光輝在附近對象的邊外....查看完整版>>Css中的filter常用濾鏡屬性及語句大全
 
CSS濾鏡屬性詳解
  ?CSS濾鏡:Mask屬性  Mask屬性爲對象建立一個覆蓋于表面的膜  ?CSS濾鏡:blur屬性  假如您用手在一幅還沒幹透的油畫上迅速劃過,畫面就會變得模糊。­CSS下的blur屬性就會達到這種模糊的效果  ?CSS濾鏡...查看完整版>>CSS濾鏡屬性詳解
 
CSS濾鏡屬性詳解
·CSS濾鏡:Mask屬性 Mask屬性爲對象建立一個覆蓋于表面的膜 ·CSS濾鏡:blur屬性 假如您用手在一幅還沒幹透的油畫上迅速劃過,畫面就會變得模糊。­CSS下的blur屬性就會達到這種模糊的效果 ·CSS濾鏡:Chroma屬性 C...查看完整版>>CSS濾鏡屬性詳解
 
Dreamweaver MX 2004 CSS擴展屬性
九.定義 CSS 樣式擴展屬性   “擴展”樣式屬性包括過濾器、分頁和光標選項,它們中的大部分效果僅受 Inte Explorer 4.0 和更高版本的支持。   指定擴展屬性:在“CSS...查看完整版>>Dreamweaver MX 2004 CSS擴展屬性
 
Dreamweaver MX 2004 CSS使用教程之CSS擴展屬性
  本站原創內容,轉載請注明出處網頁教學網。   九.定義 CSS 樣式擴展屬性  “擴展”樣式屬性包括過濾器、分頁和光標選項,它們中的大部分效果僅受 Internet Explorer 4.0 和更高版本的支持。   指定擴展屬性...查看完整版>>Dreamweaver MX 2004 CSS使用教程之CSS擴展屬性
 
CSS教程:CSS屬性behavior的語法-css設計
 在進行CSS網頁布局的時候,我們經遇到刷新要保留表單裏內容的時候,習慣的做法使用cookie,但是那樣做實在是很麻煩,css中的behavior就爲我們很好的解決了這個問題。今天就向大家介紹CSS屬性behavior的語法  beh...查看完整版>>CSS教程:CSS屬性behavior的語法-css設計
 
CSS語法手冊(三)文本填充,邊框,邊界和位置屬性(一)
    文本填充,邊框,邊界和位置屬性(一)  一、框填充屬性  1、padding-bottom  padding-left  padding-top  padding-right  功能:?個容器都有邊框,這些屬性設置邊框與框?元素間的距離。  數值...查看完整版>>CSS語法手冊(三)文本填充,邊框,邊界和位置屬性(一)
 
CSS語法手冊(四)文本填充,邊框,邊界和位置屬性(二)
    文本填充,邊框,邊界和位置屬性(二)  三、框邊界屬性  1、margin-bottom  margin-left  margin-right  margin-top  功能:這四個屬性用來設置元素與其相鄰元素間的距離,可以用長度或相對于其...查看完整版>>CSS語法手冊(四)文本填充,邊框,邊界和位置屬性(二)
 
 
回到王朝網路移動版首頁