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

2009-10-23 14:25:39 脚本之家

<title>几款CSS给文字加阴影变3D效果演示</title> 
<style type="text/css"> 
 
</style> 
<div class="webfx-main-body"> 
<p onclick="alert(this.innerHTML)"> 
<span class="sample" 
style="width: 200px; height: 70; color: black; filter: Blur(Add=0, Direction=135, Strength=10);" 
>Jb51</span><span class="sample" 
style="position: relative; left: -201; top: -15; width: 200; color: #2984ff;"> 
Jb51</span> 
<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);" 
>WebFX</span><span class="sample" 
style="position: relative; left: -201; top: -15; width: 200; color: lightskyblue; filter: Alpha(Opacity=60);" 
>Jb51</span> 
<p onclick="alert(this.innerHTML)"> 
<span class="sample" 
style="width: 200px; height: 70; color: white;" 
>Jb51</span><span class="sample" 
style="width: 200px; height: 70; position: relative; left: -200; filter: mask(color=red) shadow(direction=135) chroma(color=red);" 
>Jb51</span> 
<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);">Jb51</span> 
</div>

提示：您可以先修改部分代码再运行