語法解說:
在 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。
|