雖然 CSS 有定義 text-shadow 這個特徵，可以用來作立體字，可是 text-shadow 只有 Safari 有支援；IE, Firefox, Chrome 都沒法用。這個練習發揮土法煉鋼的精神作出立體字。這個練習用到以下特徵與方法。
- DIV：用來定義父區塊與子區塊。
- position：可以定義區塊佈局的方式。父區塊必須設成 relative，子區塊則設成 absolute。
- top, left：用來設定子區塊的位置。
- 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> - 執行結果：3D FONT3D FONT
使用 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> - 執行結果：Hello World!Hello World!Hello World!Hello World!Hello World!新年快樂!新年快樂!新年快樂!新年快樂!新年快樂!新年快樂!
