解決 IE 不支援 box-shadow 問題

使用 filter:DropShadow() 範例

未加 box-shadow 區塊陰影原圖




加入 box-shadow 區塊陰影圖樣

換成區塊


語法解說:
在 CSS 檔內或在 <HEAD> ... </HEAD>標籤內加上 CSS 定義。
Syntax box-shadow: [x offset] [y offset] [blur radius] [color] ,語法值分別為 X 軸 Y 軸 柔邊長度 顏色。
陰影可以加上兩個或更多,用半型逗號分隔即可;X、Y 和柔邊可以是負值。
柔邊長度,單位為 px ,預設為 0px。
這裡的顏色值是 HEX 值,可以使用 RGBA 值,RGBA 值的好處是,它多了一個 Alpha 透明值,以控制陰影的透明度。
-moz-box-shadow: 5px 5px 10px red; /* 此為 Firefox 專用語法 */
-webkit-box-shadow: 5px 5px 10px red; /* 此為 Safari 和 Chrome 專用語法 */
box-shadow: 5px 5px 10px red; /* 此為 Opera 10.5 + 專用語法 */
filter:progid:DXImageTransform.Microsoft.DropShadow(Color='#999'); /* ie */
在需要建立陰影的物件上加上 class="boxshadow" 即可,如上範例。
注意:解決 IE 不支援 box-shadow 問題,加入上面這一段就可以了。

本篇報導所有範例,我使用的測試瀏覽器與版本可能與你不同,請自己參考看看 GO
本篇報導參考資料來源: GO


本報導內容或資料,因限人力、時間,非教學會員,不接受任何使用上的教學與 指導,敬請見諒。
如果你喜歡這篇辛苦蒐集整理出來的報導資料,歡迎原文轉載註明出處,請勿直接盜用,謝謝你的合作。
如果你願意於貴站或部落格中介紹本站,歡迎使用複製網頁研習室連結語法,再次感謝你的支持與愛護。
版權所有 - 網頁研習室 - 李文能于 99 年 10 月 31 日整理

請按瀏覽器的檢視原始碼查看