:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type="text/css">
.hvr {-moz-box-shadow: 0px 0px 10px red;
-webkit-box-shadow: 0px 0px 10px red;
box-shadow: 5px 5px 10px red;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color='red');
display:block;
width: 100px;
height:60px;
background:black;
}
.hvr:link, .hvr:visited {color:white;text-decoration:none;}
.hvr:hover
{-moz-box-shadow: 0px 0px 20px blue;
-webkit-box-shadow: 0px 0px 20px blue;
box-shadow: 5px 5px 10px red;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=-10, Color='blue');
background:black;
color:white;
}
.hvr:active
{-moz-box-shadow: 0px 0px 40px green;
-webkit-box-shadow: 0px 0px 40px green;
box-shadow: 5px 5px 10px red;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=10, Color='green');
}
</style>
<a class=hvr href='javascript:void(0)'>投影</a> - 執行結果： 投影
javascript 應用。可以用 style 物件 的特徵 webkitBoxShadow 作動態變化。在 IE6 必須用 object.style.filter = "progid:DXImageTransform.Microsoft.DropShadow(sProperties)" 作動態變化。
- 風格用法：
<p id='test' style='width:100px; height:60px; border:solid 1px white'>投影 </p><script type='text/javascript'>
function toggleCSS(id, pty, v1, v2, ms)
{
var os=document.getElementById(id).style;
os[pty]= (os[pty] == v1 ) ? v2 : v1;
setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'",'+ms+')', ms);
}
toggleCSS("test", "boxShadow", "0px 0px 20px blue", "0px 0px 80px red", 500);
/* 用在 舊版的瀏覽器
toggleCSS("test", "webkitBoxShadow", "blue 0px 0px 20px", "red 0px 0px 80px", 500);
*/
/* 用在 IE
toggleCSS("test", "filter",
"progid:DXImageTransform.Microsoft.DropShadow(OffX=15, OffY=15, Color='red')",
"progid:DXImageTransform.Microsoft.DropShadow(OffX=-15, OffY=-15, Color='blue')", 500);
*/
</script> - 執行結果：
投影
- 上例中使用了兩個 toogleCSS()，第二個是給 IE 使用；第一個在 Safari, Chrome 成功展現。
| box-shadow（你正在看 第二頁） | : | 第一頁 | 第二頁 |
