立體字

雖然 CSS 有定義 text-shadow 這個特徵，可以用來作立體字，可是 text-shadow 只有 Safari 有支援；IE, Firefox, Chrome 都沒法用。這個練習發揮土法煉鋼的精神作出立體字。這個練習用到以下特徵與方法。

1. DIV：用來定義父區塊與子區塊。
2. position：可以定義區塊佈局的方式。父區塊必須設成 relative，子區塊則設成 absolute。
3. top, left：用來設定子區塊的位置。
4. font3D(text, clr, dx, dy, layers)：此函式可以輸出立體字。參數 text 是要輸出的字串。clr 是最上層字面的顏色。dx, dy 是兩個字面間的距離。layers 是字面層數，最多十層。

首先用 CSS 作立體字。通常立體字用在較大的字才看的出效果，而且字距要加大，以免重疊。下面的範例將子區塊重疊在父區塊上，並且用 top, left 偏移子區塊一小段距離，以作出立體字的效果。子區塊的背景色必須是透明（transparent）。在 IE6 中必須設 line-height:64px 否則在部落格會失誤。 <script type='text/javascript'> </script> <style type='text/css'> .f3d {position:relative; font-size:64px; line-height:64px; font-weight:900; letter-spacing:8px; } .f3d .face {position:absolute;} </style> <div class=f3d> 3D FONT <div class=face style='top:3px; left:3px; color:red'> 3D FONT </div> </div>

使用 javascript 產生立體字。 <style type='text/css'> .j3d {position:relative; font-size:64px; line-height:64px; font-weight:900; letter-spacing:8px; } .j3d .face {position:absolute;} </style> <script type='text/javascript'> function font3D(text, clr, dx, dy, layers) { var s='<div class=j3d>'; if( layers > 10 ) layers=10; var x=dx, y=dy; for(var i=1; i < layers; i++) { s+='<div class=face style="top:' +y+ 'px; left:' +x+ 'px">'; s+=text+ '</div>'; x+=dx; y+=dy; } s+='<div class=face style="color:' +clr+ '; top:' +y+ 'px; left:' +x+ 'px">'; s+=text+ '</div></div>'; document.write( s ); } font3D('Hello World!', 'green', 4, 4, 5) document.write( '<br /><br /><br />' ); font3D('新年快樂!', 'red', -1, -1, 6) </script>