CSS 的漸層效果

製造 CSS 漸層效果有二種方式
一種是一般的 CSS 語法
另一種則是使用 microsoft 的 gradient 物件
二種語法在 IE 及 FireFox 上測試都是一樣有效的
感謝 Tobby 的提醒,在FireFox上已看不出效果,要再找其他方法了(有篇文章說 FireFox 不支援 Filter 的CSS語法,必須用 opacity 直接指定..)

使用方式如下:

一般的 CSS 語法 (漸層的 style 可以是 1, 2, 3)
<style> .generalFilter{ filter:alpha(opacity=80, finishopacity=20, style=1); /* 背景顏色代碼 */ background-color:red; /* 文字顏色代碼 */ color:blue; } </style> <table class="generalFilter"> ... </table>	CSS 效果
<style> .generalFilter{ filter:alpha(opacity=80, finishopacity=20, style=2); /* 背景顏色代碼 */ background-color:red; /* 文字顏色代碼 */ color:blue; } </style> <table class="generalFilter"> ... </table>	CSS 效果
<style> .generalFilter{ filter:alpha(opacity=80, finishopacity=20, style=3); /* 背景顏色代碼 */ background-color:red; /* 文字顏色代碼 */ color:blue; } </style> <table class="generalFilter"> ... </table>	CSS 效果

使用 microsoft 的 gradient (漸層的 style 可以是 0, 1, 2) 將startColorStr 與 endColorStr 互調即改變漸層的方向
<style> .microsoftFilter{ filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='red', endColorStr='white', gradientType=0); } </style> <table class="generalFilter"> ... </table>	CSS 效果
<style> .microsoftFilter{ filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='red', endColorStr='white', gradientType=1); } </style> <table class="generalFilter"> ... </table>	CSS 效果
<style> .microsoftFilter{ filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr='red', endColorStr='white', gradientType=2); } </style> <table class="generalFilter"> ... </table>	CSS 效果