box-shadow 第二頁

box-shadow | box-sizing

: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（你正在看 第二頁）

:

第一頁

第二頁