text-shadow 第二頁

text-align | text-decoration | text-indent | text-overflow | text-shadow | text-transform

text-shadow 2

:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。 <style type='text/css'> .hvr {text-shadow:10px 10px red; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=10, Color='red'); font-size:40px; line-height:2em; color:white; text-decoration:none; zoom:1; } .hvr:link, .hvr:visited {color:white;text-decoration:none;} .hvr:hover {text-shadow:-10px 10px green; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=-10, OffY=10, Color='green'); background:transparent; color:white; } .hvr:active {text-shadow:10px -10px blue; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=10, OffY=-10, Color='blue'); } </style> <a class=hvr href='javascript:void(0)'> 射擊遊戲, 好玩遊戲, 賽車遊戲. </a>

javascript 應用。可以用 style 物件 的特徵 textShadow 作動態變化。在 IE6 必須用 object.style.filter = "progid:DXImageTransform.Microsoft.DropShadow(sProperties)" 作動態變化。 <p id='test' style='font-size:48px; text-shadow:blue 15px 15px; line-height:2em; zoom:1'> 投影 </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); } document.write( document.getElementById('test').style.textShadow ); toggleCSS("test", "textShadow", "15px 15px 0px blue", "-15px -15px 0px red", 500); /* 用在 IE6 瀏覽器 toggleCSS("test", "filter", "progid:DXImageTransform.Microsoft.DropShadow(OffX=15, OffY=15, Color='blue')", "progid:DXImageTransform.Microsoft.DropShadow(OffX=-15, OffY=-15, Color='red')", 500); */ </script>

• IE 沒有 textShadow；Firefox 的輸出是 '15px 15px blue'；Safari, Chrome 的輸出是 'blue 15px 15px'。
• 上例中使用了兩個 toogleCSS()，第二個是給 IE 使用；第一個在 Safari 成功展現。

text-shadow（你正在看 第二頁）

:

第一頁

第二頁