CSS 3D文字，文字阴影，空心字实现方法

代码说明

CSS 3D文字，文字阴影，空心字实现方法，猛一看很漂亮的文字效果，有阴影效果，有立体效果的，还有空心字效果的，挺不错呀，喜欢让你的网页个性一点的朋友们，可要好好借鉴这个效果啦。

HTML代码

<style type="text/css"> <!-- body{background: url(http://www.codefans.net/back.gif);} .sample{font-style: italic; font-family: arial black; font-size: 40px; font-weight: bold; cursor: hand;} #backgr2 {width: 200px; height: 70; background: black url(http://www.codefans.net/images/back1.jpg) center center no-repeat;} #backgr3 {} --> </style> <div class="webfx-main-body"> <h2>3D Text</h2> <p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" >Web</span><span class="sample" style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> Web</span> </p> <h2>Shen Long</h2> <p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; color: lightskyblue; filter: Alpha(Opacity=60) Blur(Add=0, Direction=135, Strength=20);" >Web</span><span class="sample" style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" >Web</span> </p> <h2>Shen Long</h2> <p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; color: white;" >Web</span><span class="sample" style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" >Web</span> </p> <h2>Shen Long</h2> <p onClick="alert(this.innerHTML)"> <span class="sample" style="width: 200px; height: 70; filter: mask(color=red) glow(color=black, strength=1) chroma(color=red);">Web</span> </p> </div>

代码演示