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

所属分类：网页制作 / CSS 阅读数： 1274

收藏 0赞 0分享

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

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

更多精彩内容其他人还在看

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

CSS3实现背景透明文字不透明的示例代码

浅谈CSS中的尺寸单位

CSS中有些属性的前面会加上“*”或“_”所代表的意思

CSS 设置滚动条样式的实例代码

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

纯css实现多级折叠菜单折叠树效果

CSS Grid 网格布局全解析

css flex 弹性布局详解

CSS3 二级导航菜单的制作的示例

使用css禁用input、checkbox、select等html控件实现disable效果

网络赚钱

站长故事