CSS实现阴影文字效果-巨人网络通讯

主页 > 知识库 > CSS实现阴影文字效果

CSS实现阴影文字效果

热门标签：铁路电话系统检查注册表项呼叫中心市场需求银行业务智能手机美图手机服务器配置网站文章发布

<style type="text/css">  </style> <table width="500" border="0" cellspacing="1" cellpadding="0" bgcolor="#8C96B5" align="center">  <tr>    <td bgcolor="#FFFFFF">     <table bordercolordark=#ffffff width="100%"     bordercolorlight=#000000 border=0 cellspacing="1" cellpadding="0">     <tr bgcolor="#8C96B5">       <td colspan=2 bgcolor="#8C96B5" width="100%" height="16">        <div align="center" class="title_1">..:: 巧用CSS制作艺术字 ::..</div>      </td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。</td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: blur(direction=135,strength=8)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td>        </tr>       </table>              用blur滤镜做出的效果，代码如下：       <b>FILTER: blur(direction=135,strength=8)</b></td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td>        </tr>       </table>              用dropshadow滤镜做出的效果，代码如下：       <b>FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)</b></td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: glow(color=#B4BBCF,strength=5)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td>        </tr>       </table>              用glow滤镜做出的效果，代码如下：       <b>FILTER: glow(color=#B4BBCF,strength=5)</b></td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: alpha(opacity=100,finishiopacity=0,style=1)shadow(color=#8C96B5,direction=135)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td>        </tr>       </table>              这个效果用到了两种滤镜：shadow和alpha，代码如下：       <b>FILTER: alpha(opacity=100,finishiopacity=0,style=1)       shadow(color=#8C96B5,direction=135)</b> </td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: mask(color=#E1E4EC)shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td>        </tr>       </table>              这个效果也用到两个滤镜mask和shadow，代码如下：       <b>FILTER: mask(color=#E1E4EC)       shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)</b>              注意：mask的颜色要和网页背景色一致，字体的颜色由shadow决定。</td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center"><font face="黑体" color="#8C96B5" size="6"><b><i>E流设计</i></b></font></td>        </tr>       </table>              如果说上面的效果是阴文的话，那么这个效果的应该算是阳文了，用两个滤镜实现mask和dropshadow，注意mask的颜色要和网页背景色一致，或者把mask和chroma成对使用，也可达到同样效果。代码如下：       <b>FILTER: mask(color=#E1E4EC)       dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)       chroma(color=#E1E4EC)"</b> </td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0" class="unnamed1">     <tr>       <td class="text">        <table align=center border=0 width="200" height="50">        <tr>          <td style="FILTER: glow(color=#8C96B5,strength=2)shadow(color=#B4BBCF,direction=135)" align="center"><font face="黑体" color=#E1E4EC size=6><b><i>E流设计</i></b></font></td>        </tr>       </table>              用glow滤镜可以做空心字，方法是将字体颜色设置为背景色，再将glow滤镜的strenght的值设置为1或2即可。这个效果的代码如下：       <b>FILTER: glow(color=#8C96B5,strength=2)       shadow(color=#B4BBCF,direction=135)</b> </td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0">     <tr>       <td class="text">        <table height=150 width=200 align=center        background="http://www.e-flowing.com/1/bg_1.jpg" border=0>        <tr>          <td style="FILTER: mask(color=#E1E4EC)shadow(color=#B4BBCF,direction=135)chroma(color=#E1E4EC)" align="center"><font face="黑体" color=#8C96B5 size=6><b><i>E流设计</i></b></font></td>        </tr>       </table>                     <table height=150 width=200 align=center background="http://www.e-flowing.com/1/bg_2.jpg" border=0>        <tr>          <td style="FILTER: glow(strength=1)mask(color=#B4BBCF)chroma(color=#B4BBCF)" align="center" height=54><font face="黑体" color=#8C96B5 size=6><b><i>E流设计</i></b></font></td>        </tr>       </table>                     <table height=150 width=200 align=center background="http://www.e-flowing.com/1/bg_3.jpg" border=0>        <tr>          <td style="FILTER: mask(color=#E1E4EC)dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)chroma(color=#E1E4EC)" align="center" height=54><font face="黑体" color=#8C96B5 size=6><b><i>E流设计</i></b></font></td>        </tr>       </table>      </td>     </tr>     <tr>       <td class="unnamed1"><font class="text">如果背景采用图片，为了能达到满意的效果需要将mask和chroma组合使用，这样能使字体感觉是透明的，让背景透出来。              上面列出的效果前者的代码是：       <b>FILTER: mask(color=#E1E4EC) shadow(color=#B4BBCF,direction=135) chroma(color=#E1E4EC)</b>       注意：字体的颜色由shadow决定，mask和chroma的颜色要相同，色彩任意。              中间的代码是：       <b>FILTER: glow(strength=1) mask(color=#B4BBCF) chroma(color=#B4BBCF)</b>       注意：mask和chroma的颜色相同，这个颜色决定了字体的颜色。              后者的代码是：       <b>FILTER: mask(color=#E1E4EC) dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1) chroma(color=#E1E4EC)</b>       注意：mask和chroma的颜色相同，色彩由dropshadow决定。</font></td>     </tr>    </table>   </td>  </tr>  <tr>    <td bgcolor="#E1E4EC">     <table width="100%" border="0" cellspacing="8" cellpadding="0">     <tr>       <td class="text">        <table height=150 cellspacing=0 cellpadding=0 width=480 align=center background="http://www.e-flowing.com/1/bg_1.jpg" border=0>        <tr>          <td style="FILTER: glow(strength=4)mask(color=#E1E4EC)" height=109 align="center" valign="middle"><font face="Verdana" color="#8C96B5" size="6"><i><b>WELCOME           TO          </i></font></td>" TARGET=_blank>WWW.E-FLOWING.COM</b></i></font></td>        </tr>       </table>      </td>     </tr>     <tr>       <td class="unnamed1"><font class="text">这个效果的代码：       <b>FILTER: glow(strength=4)mask(color=#E1E4EC)</b></font></td>     </tr>    </table>   </td>  </tr>  </table>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

标签：河南沧州沈阳上海红河新疆乐山长治

巨人网络通讯声明：本文标题《CSS实现阴影文字效果》，本文关键词；如发现本文内容存在版权问题，烦请提供相关信息告之我们，我们将及时沟通与处理。本站内容系统采集于网络，涉及言论、版权与本站无关。

相关文章

电销机器人到底如何运作的？

很多人对电销机器人到底如何运作存在着巨大的好奇心，那么今天，小编就带大家看一下机器人的运作流程！电销...

电话机器人的兴起对电销行业来说是“惊喜”还

随着互联网大数据的普及，许多电销行业如雨后春笋般争先恐后地冒出来。而今电销行业的混乱，让各位涉足电销...

百应电话机器人有哪些功能？百应电话机器人好

百应智能电话机器人能够协助企业进行呼入接待、外呼回访等服务场景，能够经过不断的培训学习，逐步完善成专...

客服外呼系统都有哪些优势？

当前呼叫中心电话系统被企业用于业务电销以及客户服务，然而随着企业需求不断扩大，原来传统的自建呼叫中心...

电销机器人效果怎么样？智能电话机器人可行吗

几百数千年后，或许没人会记得卡斯帕罗夫曾是世界第一的围棋高手，但人们会记得，他败给了电脑深蓝。那虽算不...

百应智能外呼系统，贷后管理科技升级

去年底开始，接连出台政策和法规加强对消费金融等金融形态进行规范。强监管下，行业走向规范发展，行业竞...

百应智能外呼系统引领外呼行业新风向

电话销售：您好，我这边是XX地产，给您推荐一下精装酒店式公寓，有兴趣了解一下吗? 客户：具体位置在哪里啊?...

小贷企业为什么需要电销机器人？

随着信贷行业逐步进入我们的生活中，越来越多人选择借款来处理资金难题。信贷企业不断涌现，业务开展迅猛，行...

雷霆电话机器人是如何转接人工的？

当我们在拨通移动、联通或电信运营商的客服电话时，总会要先经过一些机械化的选择，然后成功连接人工坐席反馈...

米卡迪电话机器人效果怎么样？

外呼电话机器人，之所以能智能的与客户无忧交流，因为运用了下面这么多高技术。 ASR 语音识别米卡迪电话机器人...

灵声电话机器人效果怎么样？好用吗

外呼电话机器人，之所以能智能的与客户无忧交流，因为运用了下面这么多高技术。灵声电话机器人效果怎么样？...

电销机器人要想效果好，话术定制有多重要

电话机器人是基于智能语音技术的智能营销工具。它会像真人一样主动拨打客户的电话，介绍产品并回答客户的咨询...

智能电话机器人的实现原理，使用安全吗？

随着科学技术的进步和人工智能的发展，越来越多的智能产品已经进入我们的工作和生活。智能手机、智能电视、智...

福州哪里有电话机器人研发公司？

人工智能再次成为各行各业关注的焦点，自从这个概念首次提出以来，60年已经过去了。自从AlphaGo以巨大优势击败人...

电销机器人销售能力怎么样？

自从电话机器人一出现，在电销行业火爆了起来。面对电话机器人的各种优势，企业跃跃欲试，但又害怕效果不理...

推荐文章

laravel与thinkphp之间的区别与优缺点

win7右下角的网络连接显示红叉,但可以正常上网是怎么回事?如何解决?

centos安装xenserver xe命令行的方法

邮件发送简单例子-jsp文件

一个文义性品牌定义的提出与讨论

uniqueidentifier转换成varchar数据类型的sql语句

语音智能电话机器人

【干货】实用的网站空间购买指南

上一篇：如何设置一个指定高度的DIV

下一篇：全面考察“禁用浏览器后退”

一起分享吧

微信咨询办理

在线QQ客服
( 客服小王 )
( 客服小李 )
( 客服小刘 )
( 客服小张 )

关于我们 | 荣誉资质 | 呼叫中心 | 代理加盟 | 客户案例 | 服务支持 | 产品介绍 | 行业资讯

Copyright © 1999-2012 诚信合法规范的巨人网络 www.1330.cn 始建于2005年

全国网站建设网站开发咨询热线：400-1100-266 0514-86177077

江苏扬州巨人网络科技有限公司总部地址：江苏省扬州信息产业基地11号楼4层

《增值电信业务经营许可证》苏B2-20120278 苏ICP备15040257号网站地图

全国咨询热线

400-1100-266

在线客服( QQ：340506921 )

版权所有：巨人网络(扬州)科技有限公司——拥有网站建设十年经验，具备独立网站开发能力，能够提供完善的网站设计及相关的网站制作服务！全国统一服务热线：400-1100-266

微信客服

电话咨询
400-1100-266