您现在的位置是：网站首页> 编程资料编程资料

CSS 文字加阴影变3D效果演示_CSS教程_CSS_网页制作_

2021-09-09 1112人已围观

简介通过这个小例子你是否觉得CSS处理文字效果方面功能比较强大呢？确实是这样的，用CSS可以给文字加阴影、加背景，让文字变色炫彩、变成3维的，这并不难，好好研究一下这几个示例，你也能做出来的。

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

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

上一篇：DIV+CSS 布局代码精简对SEO的影响_CSS布局实例_CSS_网页制作_

下一篇：IE8 控件错位的解决方法_CSS教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

CSS 文字加阴影变3D效果演示_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢