CSS 文字加阴影变3D效果演示

<br /><title>几款CSS给文字加阴影变3D效果演示</title><br /><style type=”text/css”><br /><!–<br />body{background: url(back.gif);}<br />.sample{font-style: italic; font-family: arial black;<br />font-size: 40px; font-weight: bold; cursor: hand;}<br />#backgr2 {width: 200px; height: 70; background: black url(images/back1.jpg) center center no-repeat;}<br />#backgr3{}<br />–><br /></style><br /><div class=”webfx-main-body”><br /><p onclick=”alert(this.innerHTML)”><br /><span class=”sample”<br />style=”width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);”<br />>Jb51</span><span class=”sample”<br />style=”position: relative; left: -201; top: -15; width: 200; color: #2984ff;”><br />Jb51</span><br /><p onclick=”alert(this.innerHTML)”><br /><span class=”sample”<br />style=”width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);”<br />>WebFX</span><span class=”sample”<br />style=”position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);”<br />>Jb51</span><br /><p onclick=”alert(this.innerHTML)”><br /><span class=”sample”<br />style=”width: 200px; height: 70; color: white;”<br />>Jb51</span><span class=”sample”<br />style=”width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);”<br />>Jb51</span><br /><p onclick=”alert(this.innerHTML)”><br /><span class=”sample” style=”width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);”>Jb51</span><br /></div><br />
提示：您可以先修改部分代码再运行