使用javascript做立体字效果

虽然 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>

效果图：

使用 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>

效果图：