１、可以將格式和結構分離
HTML從來沒打算控制網頁的格式或外觀。這種語言定義了網頁的結構和個要素的功能，而讓瀏覽器自己決定應該讓各要素以何種模樣顯示。但是網頁設計者要求的更多。所以當Netscape推出新的可以控制網頁外觀的HTML標籤時，網頁設計者無不歡呼雀躍。我們可以用<FONT FACE>、<I>包在<P>外邊控制文章主體的外觀等等。然後我們將所有東西都放入表格，用隱式GIF空格產生一個20象素的邊距。一切都變得亂七八糟。編碼變得越來越臃腫不堪，要想將什麼內容迅速加到網頁中變得越來越難。
串接樣式表通過將定義結構的部分和定義格式的部分分離使我們能夠對頁面的布局施加更多的控制。HTML仍可以保持簡單明了的初衷。CSS代碼獨立出來從另一角度控制頁面外觀。
２、可以以前所未有的能力控制頁面的布局
<FONT SIZE>能使我們調整字型大小，表格標籤協助我們產生邊距，這都沒錯。但是，我們對HTML總體上的控制卻很有限。我們不可能精確地產生80象素的高度，不可能控制行間距或字間距，我們不能在螢幕上精確定位元影像象的位置。但是現在，樣式表使這一切都成為可能。而即將推出的新的CSS功能更令人興奮。
３、可以製作出體積更小下載更快的網頁
還有更好的訊息：樣式表只是簡單的文本，就象HTML那樣。它不需要圖象，不需要執行程式，不需要外掛程式，不需要流式。它就象HTML指令那樣快。有了CSS之後，以前必須求助於GIF的事情現在通過CSS就可以實現。還有，正如我先前提到的，使用串接樣式表可以減少表格標籤及其它加大HTML體積的代碼，減少圖象用量從而減少檔案尺寸。
４、可以更快更容易地維護及更新大量的網頁
沒有樣式表時，如果我想更新整個網站中所有主體文本的字型，我必須一頁一頁地修改每張網頁。即便網站用資料庫提供服務，我仍然需要更新所有的模板，而且更新每一模板中每一個執行個體執行個體的<FONT FACE>。樣式表的主旨就是將格式和結構分離。利於樣式表，我可以將網站上所有的網頁都指向單一的一個CSS檔案，我只要修改CSS檔案中某一行，那麼整個網站都會隨之發生變動。
５、瀏覽器將成為你更友好的介面
不象其它的的網路技術，樣式表的代碼有很好的相容性，也就是說，如果使用者丟失了某個外掛程式時不會發生中斷，或者使用老版本的瀏覽器時代碼不會出現雜亂無章的情況。只要是可以識別串接樣式表的瀏覽器就可以應用它。
二、樣式表的文法
一個樣式表由樣式文法組成, 以告訴瀏覽器怎樣去呈現一個文檔. 有很多將樣式文法加入到你的HTML文檔中的方法, 但最簡單的啟動方法是使用HTML的STYLE組件.這個元素放置於文檔的HEAD部分, 包含網頁的樣式規則。
１、選擇符
每個規則的組成包括一個選擇符--通常是一個HTML的元素, 例如BODY, P, 或EM和該選擇符所接受的樣式.有很多的屬性可以用於定義一個元素. 每個屬性帶一個值, 共同地描述選擇符應該如何呈現.樣式規則群組成如下:
選擇符 { 屬性: 值 }
單一選擇符的複合樣式聲明應該用分號隔開:
選擇符 { 屬性1: 值1; 屬性2: 值2 }
以下是一段定義了H1和H2元素的顏色和字型大小屬性:
<HEAD>
<TITLE>CSS例子</TITLE>
<STYLE TYPE="text/css">
ＥＭ { font-size: 150%; color: blue }
</STYLE>
</HEAD>
上述的樣式表告訴瀏覽器用1.5倍的藍色字型去顯示網頁中強調的部分。
２、類選擇符
單一個選擇符能有不同的CLASS(類)，因而允許同一元素有不同樣式。例如，一個網頁製作者也許希望視其語言而定，用不同的顏色顯示代碼 :
code.html { color: #191970 }
code.css { color: #4b0082 }
以上的例子建立了兩個類，css和html，供網頁的CODE元素使用。CLASS屬性是用來在網頁中以指明元素的類，例如，<P CLASS=css>，每個選擇符只允許有一個類。一個良好的習慣是在命名類的時候，根據它們的功能而不是根據它們的外觀。上述例子中的css類也可以命名為effect。
３、ID 選擇符
ID 選擇符個別地定義每個元素的成分。這種選擇符應該盡量少用，因為他具有一定的局限。一個ID選擇符的指定要有指示符"#"在名字前面。例如，ID選擇符可以指定如下:
<style type="text/css">
<!--
#first { color: green }
#second { color:teal }
-->
</style>
４、關聯選擇符
關聯選擇符只不過是一個用空格隔開的兩個或更多的單一選擇符組成的字串。這些選擇符可以指定一般屬性，而且因為層疊順序的規則，它們的優先權比單一的選擇符大。例如， 以下的上下文選擇符
P EM { background: yellow }，這個值表示段落中的強調文本會是黃色背景；而標題的強調文本則不受影響。
５、偽類和虛擬元素
偽類和虛擬元素是特殊的類和元素，能自動地被支援CSS的瀏覽器所識別。偽類區別開不同種類的元素(例如，visited links(已訪問的串連)和active links(可啟用串連)描述了兩個定位錨(anchors)的類型)。虛擬元素指元素的一部分，例如段落的第一個字母。
偽類或虛擬元素規則的形式如：選擇符:偽類 { 屬性: 值 }或選擇符:虛擬元素 { 屬性: 值 }
偽類和虛擬元素不用HTML的CLASS屬性來指定。一般的類可以與偽類和虛擬元素一起使用，如下:
選擇符.類: 偽類 { 屬性: 值 }
或
選擇符.類: 虛擬元素 { 屬性: 值 }
６、定位錨偽類
偽類可以指定A元素以不同的方式顯示串連(links)、已訪問串連(visited links)和可激 活串連(active links)。定位錨元素可給出偽類link、visited或active。一個已訪問串連可以定義為不同顏色的顯示，甚至不同字型大小和風格。一個有趣的效果是使當前(或"可啟用")串連以不同顏色、更大的字型顯示。然後，當網頁的已訪問串連被重選時，又以不同顏色、更小字型顯示。這個樣式表的樣本如下:
A:link { color: red }
A:active { color: blue; font-size: 125% }
A:visited { color: green; font-size: 85% }
７、首行虛擬元素
通常在報紙上的文章，例如"據新華社報道"中的，文本的首行都會以粗印體而且全部大寫地展示。CSS1包括了這個功能，將其作為一個虛擬元素。首行虛擬元素可以用於任何區塊層級元素(例如P、H1等等)。以下是一個首行虛擬元素的例子:
P:first-line {
三、樣式表的屬性
１、背景屬性
對於背景顏色和背景圖片大家都比較熟悉,這裡介紹兩個比較有趣的背景圖案屬性background-attachment此屬性有兩個值：scroll 和 fixed;scroll是初始值，產生的效果是常見的背景圖案隨頁面上的文字一起流動。fixed屬性是指背景靜止不動，文字在背景上流動的特殊效果，例如：body{background-attachment:fixed} 。background-position
此屬性是設定背景圖案的起始位置，可分別用百分比和長度值來設定，初始值為0和0，例如：body{background-position:50% 50%}
２、文字屬性
這裡介紹幾個常用的文字屬性："text-decoration ""text-aling""line-heigth""text-indent"。
text-decoration相信大家對這個屬性都不會陌生，如我們常在網上看到的沒有底線的超連結，就是通過設定這個屬性來實現的。其常用的屬性值有４個，分別是：
屬性值 說明
none 無
underline 底線
overline 上劃線
lineth-rough 刪除線
有上面的屬性值以後，我們就可以去掉超連結中的底線了，設定如下：A:link{text-decoration:none}
text-align這個屬性定義了文本的對齊，其作用與HTML中的"align"相似。其定義的對齊有四種，分別是：
left 靠左對齊
right 靠右對齊
center 置中
justify 左右對齊
line-height這個屬性用來定義文本行高，即相鄰的兩行文字間的距離，此屬性可用數字、長度、百分比來定義。例如：
body{line-heigth:1.5;font-size:10pt}
body{line-heigth:150%;font-size:10pt}
這兩個定義產生的行高都是15pt;即行高屬性值乘以字型大小。
text-indent此屬性定義文本首行的縮排方式，也即是在用WORD軟體時所見的首行縮排的效果；此屬性值可以為負。例如：
P{text-indent:5em}
p{text-indent:-5em}
將上面任何一句加到HTML中，就可以看到效果了。
３、字型屬性
字型屬性是使用最多的，CSS的字型的常用屬性包括：
font-family 匹配字型 BODY{font-family:Arial,Times,impact}
font-weight 字型精細 p{font-weight:bolder}設定字型為加粗
font-size 字型大小 body{font-size:10pt}
font-family 字形 p{font-family:italic}設定字型為斜體
其中的font-family的含義：首先尋找字型的名稱（Arial），如果在該電腦中安裝了這種字型，就使用它。如果沒有安裝，則移向下一種字型（Times），如果這種字型也沒有安裝，則移向第3種字型.你可以在列表中加入任何種字型名稱。當你對一種字型在不同的操作平台上的名稱沒有把握時，這樣做是一種好辦法。另外你也可以一次性的定義所有的屬性。例如：
BODY{fotn-family:宋體，Arial;font-weight:bolder;fint-size:10pt;color:blue}
四、樣式表的定位
CSS定位的"positon"屬效能夠使用兩種方法定位HTML元素：相對定位和絕對位置。所謂相對定位是指允許元素在相對於文檔布局的原始位置上進行位移；而絕對位置允許元素與原始的文檔布局分離且任意定位。CSS的定位屬性共有9個，分別是：
position、left、top、width、height、overflow、z-index和visibility position
positon的屬性值有absolute、relative和static三個。當使用絕對位置元素absolute時，被定位元素是獨立的，它與上下級元素都無關，完全獨立於其他內容。當使用相對定位relative時，該元素對於上一級元素的位置進行布局定位；通過相對定位，使用指令碼語言就能實現動畫效果了。
left、top
CSS在格式化文檔時，是將對象放置在一個個的容器裡，再進行格式化；這個容器的左上方就是定位的參考點。left值就是容器的左上頂點到上級左邊界的距離；"top"就是容器左上頂點到上階項目上邊界的距離。
width、height
適用於絕對位置的元素，"width"和"height"定義了元素所佔空間的大小。可用百分比或數字定義。
overflow
此屬性定義了元素的內容超出容器的寬度和高度後，瀏覽器怎樣處理。其屬性值有四個，分別是：
visible：無論定義的width和height是多少，其超出部分都無條件顯示。
hidden：超出定義的容器的寬度和高度部分將被剪下。
scroll：瀏覽器將提供一組滾屏工具。
auto：根據瀏覽器的不同而不同，通常會提供一組滾屏工具。
五、樣式表的引入
瞭解了CSS的定義方式，下面將具體介紹如何在HTML中引入CSS的各種方法。
1、使用<LINK> 連結外部樣式表單；例如：
<HEAD>
<TITLE>My Stylesheet</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
應用CSS檔案的一個最大好處就是，你可以在每個HTML檔案中引用這個檔案，從而可使整個網站的HMTL檔案在風格上保持一致，避免重複的CSS屬性設定；另外，當你遇上改版或作某些重大調整要對風格進行修改時，可直接修改這個CSS檔案，當然了，HTML檔案一直引用最新動向的樣式單，而不必每個每個HTML檔案進行整，你說是不是挺方便的呀！特別提醒一下，如果你想建立自己的網站，這方面不可忽視喲，如果在建站之初沒有網站風格的統一規劃並形成CSS檔案，以後內容一多，想調整一下風格會累死你的。
2、把定義語句放在<HEAD>和<BODY>標籤之間，這種風格定義產生作用的範圍也只局限於本檔案，其格式如下(套用上邊的CSS)
<Style Type="text/css">
<!--
td{ color: green; font-size: 15px; font-family: Arial }
-->
</Style>
３、使用CSS"@import"匯入樣式表單；例如：
<STYLE TYPE="text/css">
<!--
@import url(mystyles.css);
-->
</STYLE>
4、在<BODY>內部元素中使用"STYLE"標記來定義;例如：
<p style="color: red; font-size: 20px; font-family: Arial">我的樣式表</p>
5、直接插入式
直接插入式很簡單，只是在每個HTML標誌後書寫CSS屬性就可以了。這種方式很直接，如我們想規定一個Table標誌中的字為紅色，字型大小為10pt，則可書寫如下：
<Table style="color:red;font-size:10pt">
這種方式主要用於對具體的標誌做具體的調整,其作用的範圍只限於本標誌。
五、樣式表的引入
瞭解了CSS的定義方式，下面將具體介紹如何在HTML中引入CSS的各種方法。
1、使用<LINK> 連結外部樣式表單；例如：
<HEAD>
<TITLE>My Stylesheet</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
應用CSS檔案的一個最大好處就是，你可以在每個HTML檔案中引用這個檔案，從而可使整個網站的HMTL檔案在風格上保持一致，避免重複的CSS屬性設定；另外，當你遇上改版或作某些重大調整要對風格進行修改時，可直接修改這個CSS檔案，當然了，HTML檔案一直引用最新動向的樣式單，而不必每個每個HTML檔案進行整，你說是不是挺方便的呀！特別提醒一下，如果你想建立自己的網站，這方面不可忽視喲，如果在建站之初沒有網站風格的統一規劃並形成CSS檔案，以後內容一多，想調整一下風格會累死你的。
2、把定義語句放在<HEAD>和<BODY>標籤之間，這種風格定義產生作用的範圍也只局限於本檔案，其格式如下(套用上邊的CSS)
<Style Type="text/css">
<!--
td{ color: green; font-size: 15px; font-family: Arial }
-->
</Style>
３、使用CSS"@import"匯入樣式表單；例如：
<STYLE TYPE="text/css">
<!--
@import url(mystyles.css);
-->
</STYLE>
4、在<BODY>內部元素中使用"STYLE"標記來定義;例如：
<p style="color: red; font-size: 20px; font-family: Arial">我的樣式表</p>
5、直接插入式
直接插入式很簡單，只是在每個HTML標誌後書寫CSS屬性就可以了。這種方式很直接，如我們想規定一個Table標誌中的字為紅色，字型大小為10pt，則可書寫如下：
<Table style="color:red;font-size:10pt">
這種方式主要用於對具體的標誌做具體的調整,其作用的範圍只限於本標誌。
六、樣式表濾鏡的構成
濾鏡作為樣式表大家庭中的一員，它跟其他樣式表元素的定義和應用方式當然是一樣的，能夠直接定義在HTML標識的<head>和</head>只間。樣式表濾鏡的基本文法為：
標記｛ＦＩＬＴＥＲ：濾鏡名（屬性名稱１＝屬性值１，屬性名稱２＝屬性值２，....）；｝
它所表達的意思是：在該標記範圍內的內容，樣式表濾鏡將按照小括弧內的屬性名稱所限定的對象，按屬性值所設定的數值進行特效處理。其中標記為ＨＴＭＬ文法中的任意標記，如ＳＰＡＮ，Ｐ，ＢＲ等等；濾鏡名就是我們下面所涉及到的１４種濾鏡名稱；每一種濾鏡它都有自己特定的屬性名稱及其屬性值。
例如：Ｐ { 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中對圖片進行特效處理了，而不用再用專門的圖片處理軟體編輯圖片了。樣式表濾鏡不僅對圖象起作用，同時也適用於文本；在這裡筆者為方便敘述，暫用文本作為例子來談談濾鏡的參數及其作用。
八、濾鏡的參數及其作用
１、Alpha 濾鏡
文法：{FILTER：ALPHA(opacity=屬性值１,finishopacity=屬性值２,style=屬性值３,startx=屬性值４,starty=屬性值５,finishx=屬性值６,finishy=屬性值７)}
作用：該濾鏡能夠使對象呈現漸層半透明效果，其效果是由小括弧中的各屬性名稱及其對應的屬性值決定。
參數：Opacity 屬性是設定不透明的程度，用百分比表示其屬性值，大小是從0到100，0表是完全透明，100表示完全不透明。
FinishOpacity 屬性是一個同Opacity一起使用的選擇性的參數，當同時設定Opacity和FinishOpacity時，可以製作出透明漸進的效果；其屬性值也是從0到100，0表是完全透明，100表示完全不透明。
Style屬性是用來設定漸層風格的，當同時設定了Opacity和finishOpacity產生透明漸進時，它主要是用來指定漸進的顯示形狀，０代表均勻漸進；１代表線形漸進；２代表放射漸進；３代表直角漸進。
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>
２、ＢＬＵＲ濾鏡
文法：{filter:blur(add=屬性值１,direction=屬性值２,strength=屬性值３)；}
作用：該濾鏡能夠使對象表現一種模糊的效果，其效果是由小括弧中的各屬性名稱及其對應的屬性值決定。
參數：add屬性是用來確定是否在移動模糊中使用原有目標，其屬性值有０和１兩種，０屬性值意思是在模糊運動中不使用原有目標，大多數情況下適用於圖象；１屬性值代表在模糊運動中使用原有目標，大多數情況下適用於文本。
direction屬性是用來表示模糊移動時的角度，其屬性值為０到３６０度。
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>
３、DropShadow 濾鏡
文法：{filter:dropshadow(color=屬性值１,offx=屬性值２,offy=屬性值３,positive=屬性值４)；}
作用：該濾鏡主要是用來產生重疊效果的，其效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的。
參數：ＣＯＬＯＲ屬性是用來設定投影文字的顏色。
offＸ屬性是代表投影文字與原文字之間水平方向上的位移量。
offＹ屬性是代表投影文字與原文字之間垂直方向上的位移量。
positive屬性是一個布爾值（０或者１），如果為"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>
４、Glow 濾鏡
文法：{filter:glow(color=屬性值１,strength＝屬性值２)；}
作用：該濾鏡能夠在原對象周圍產生一種類似發光的效果，其具體效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的。
參數：COLOR屬性是指定發光的顏色。
STRENGTH則是發光強度的表現，也指光暈的厚度；其大小可以從1到255之間的任何整數來指定這個強度。
執行個體：
<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:glow(color=#880088,strength=3);}
-->
</style>
</head>
<body>
<p>樣式表濾鏡執行個體</p>
</body>
</html>
５、Chroma 濾鏡
文法：{filter:chroma(color=屬性值)；}
作用：該濾鏡能夠使映像中的某一顏色變成透明色。
參數： COLOR屬性用來指定要變為透明色的顏色，通過該屬性值的設定，我們可以來過濾某圖象中的指定顏色。
執行個體：
<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:chroma(color=#0000fe)；}
-->
</style>
</head>
<body>
<p>樣式表濾鏡執行個體</p>
</body>
</html>
６、FlipH 濾鏡
文法：{filter:filph}
作用：該濾鏡能夠使ＨＴＭＬ對象進行左右對換，一般適用於圖象對象。
參數：該濾鏡沒有參數。
７、FlipＶ 濾鏡
文法：{filter:filpv}
作用：該濾鏡能夠使ＨＴＭＬ對象進行上下對換，一般適用於圖象對象。
參數：該濾鏡沒有參數。
８、Wave 濾鏡
文法：{filter:wave(add=屬性值１,freq=屬性值２,lightstrength=屬性值３,phase=屬性值４,strength=屬性值５)；}
作用：該濾鏡能夠使被過濾對象產生正弦波形，從而能造成一種變形幻覺，其具體效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的，一般適用於圖象對象。
參數：add屬性是一個布爾值，它用來決定是否將原始圖象加入最後的效果之中。
freq屬性是指波紋的頻率，也就是指定在對象上一共需要產生多少個完整的波紋。
phase屬性是用來設定正弦波的位移量，也就是決定波形的形狀，其屬性值的取值範圍為從０到３６０度。
lightstrength屬性可以對于波紋增強光影的效果，其取值範圍為從0到100。
strength屬性是用來決定波形振幅的大小。
９、Shadow 濾鏡
文法：{filter:shadow(color=屬性值１,direction=屬性值２)；}
作用：該濾鏡能夠使對象產生一種陰影製作效果，其具體效果是由小括弧中的各屬性名稱及其對應的屬性值來產生的。
參數：color屬性是用來設定陰影的顏色。
direction屬性是用來設定投影的方向，取值範圍為０度到３６０度，其中0度代表垂直向上，然後每45度為一個單位，該屬性的預設值是向左的270度。
執行個體：
<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:shadow(color=＃00ff00,direction=２)；}
-->
</style>
</head>
<body>
<p>樣式表濾鏡執行個體</p>
</body>
</html>
１０、Mask 濾鏡
文法：{filter:mask(color=屬性值)；}
作用：該濾鏡能夠利用一個HTML對象在另一個對象上產生映像的遮罩 ，可以為對象建立一個覆蓋於表面的膜，其效果就象戴者有色眼鏡看物體一樣，一般適用於圖象對象。
參數：color屬性就是用來指定要被遮罩的顏色。
１１、 Light 濾鏡
文法：{Filter：light｝
作用：該濾鏡能夠使ＨＴＭＬ對象產生一種類比光源的投射效果。一旦為對象定義了light濾鏡屬性，那麼就可以調用它的方法來設定或者改變屬性。light可用的方法有：
MoveLight 移動光源
Changcolor 改變光的顏色
AddAmbient 加入包圍的光源
AddPoint 加入點光源
Clear 清除所有的光源
AddCone 加入錐形光源
Changstrength 改變光源的強度
可以定義光源的虛擬位置，以及通過調整X軸和Y軸的數值來控制光源焦點的位置，還可以調整光源的形式（點光源或者錐形光源）指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態設定光源，可能回產生一些意想不到的效果。
參數：該濾鏡沒有參數。
１２、Gray 濾鏡
文法：{filter:gray}
作用：該濾鏡能夠使一張彩色的圖片轉變為灰色調圖象，一般適用於圖象對象。
參數：該濾鏡沒有附帶參數。
１３、Invert 濾鏡
文法：{filter:invert}
作用：該濾鏡能夠使圖象產生照片底片的效果，一般適用於圖象對象。
參數：該濾鏡沒有參數。
１４、Xray 濾鏡
文法：{filter:xray}
作用：該濾鏡能夠讓對象反映出它的輪廓並把這些輪廓加亮顯示，一般適用於圖象對象。
參數：該濾鏡沒有參數。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
