• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > IE下实现类似CSS3 text-shadow文字阴影的几种方法

IE下实现类似CSS3 text-shadow文字阴影的几种方法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含CSS3,text-shadow,文字阴影等相关知识,佚名 希望在学习及工作中可以帮助到您
一、开始的擦边话
为了测试IE9浏览器,下午晃晃荡荡把系统换成window7的了。果然,正如网上所传言的一样,IE9浏览器确实不支持CSS3 text-shadow属性,且根据最近的IE10 preview版的反馈,IE10浏览器也是不支持text-shadow属性的。至于为何不支持,就像女孩的心思一样,我也是百思不得其解。

不过考虑到text-shadow的更多的是效果性质的属性,且潜力有限,所以,就我个人而言,最近版本的IE浏览器不支持该属性我还是相对比较淡然的。虽然IE浏览器不支持text-shadow文字阴影属性,但是我们可以使用一些特殊的手段,或是方法实现类似于文字阴影的效果,而本文就将简单展示几种我所知的方法。

二、glow滤镜下的文字阴影效果
IE滤镜中有个名叫glow的滤镜,用来实现光晕效果,于是,我们可以用来实现无方向的文字阴影效果。

该滤镜最简单的使用类似下面:

filter:glow(color=black,strength=5);
上面实现的效果就是5像素扩散大小的黑色光晕,效果类似下面(截自IE9浏览器):
光晕效果滤镜下的文字效果 张鑫旭-鑫空间-鑫生活

demo页面中效果想对应的CSS代码如下:

并且对不同颜色的支持效果大相径庭,例如,我们把光晕的黑色改成灰色,看看IE9浏览器下的效果:
灰色光晕下的效果 张鑫旭-鑫空间-鑫生活

可以看到不仅光晕颜色不纯(杂色丛生),且文字边缘也有不和谐的黑色糙边,让人不仅感叹:你能不能再丑一点。

2. 既然是光晕滤镜,就决定了此方法实现的文字阴影效果是无方向性的,就四周均匀扩散性质的。这是该方法一个较大的局限性。
三、MotionBlur滤镜下的文字阴影效果
IE滤镜中有个名叫MotionBlur的滤镜,用术语称呼其为“动感模糊滤镜”。该滤镜使用的示例如下:

filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=145);
用中文释义就是:145度方向上5像是大小的动感模糊。产生的效果基本上就是下面这幅模样:
动感模糊的文字阴影效果demo 张鑫旭-鑫空间-鑫生活

demo页面中相关的CSS代码如下:

正所谓人比人,气死人啊。两者的效果差距可以赶上凤姐和志玲姐的差距了。然而,通过某些小手段,我们也可以让MotionBlur滤镜下的文字阴影效果爷变得很赞,这就是下面一节的内容。
四、MotionBlur滤镜下文字阴影效果进一步优化
路上有坑怎么办?很简单,填上就好,如果没有实物填充,盖个盖子什么的也是好的。所以,正如上面说到,文字应用动感滤镜实现投影效果好比割肉补疮,现在,我们只要在被割掉的那块肉上再补上一块不就OK了吗?

您可以狠狠地点击这里:MotionBlur滤镜下文字阴影效果优化demo

结果在IE9浏览器的兼容模式下(貌似是IE7 的核)的效果如下图:
兼容模式下的动感模糊滤镜下的效果 张鑫旭-鑫空间-鑫生活

效果看上去要舒服多了。效果实现的原理是两端一模一样的文字相互重叠,背后的文字动感模糊,前面的文字就是很纯洁的文字了。

CSS代码如下:

在FireFox浏览器下效果为:
Firefox浏览器下的文字阴影效果 张鑫旭-鑫空间-鑫生活

您可能想查找下面的文章:

  • 使用CSS3制作一个简单的进度条(demo)
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果
  • CSS3实现自定义Checkbox特效实例代码
  • 总结30个CSS3选择器
  • CSS3模拟动画下拉菜单效果
  • CSS3动画:5种预载动画效果实例
  • CSS3 仿微信聊天小气泡实例代码

相关文章

  • 2017-08-06用hover配合(纯css)position实现网页动态展示效果
  • 2017-08-06表格边框以虚线显示的css样式
  • 2017-08-06组织结构可以任意拖动到指定位置div
  • 2017-08-06跨浏览器开发经验总结(二) CSS
  • 2017-09-10css inline-block介绍
  • 2017-08-06UL里的LI元素左浮动层一行显示时使其居中的方法
  • 2017-08-06用css给tbody加垂直滚动条的具体思路及样式代码
  • 2017-08-06浅析CSS实现水平垂直同时居中的5种思路
  • 2017-08-06CSS小技巧 导航中鼠标经过变换文字的实现代码
  • 2017-08-06IE6浮动换行bug比较实用简单解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 关于CSS中 星号*的使用介绍
    • CSS加载失败原因的总结与分析
    • 举例详解CSS中的字体尺寸设置
    • CSS实现限制字数功能当对象内文本溢出时显示省略标记
    • Iframe 高度自适应(兼容IE/Firefox、同域/跨域)
    • 网页设计应该熟知的CSS 3.0技术
    • 详细介绍CSS中的伪选择器
    • CSS3 优势以及网页设计师如何使用CSS3技术
    • 不用Cookie的仿刷新二级高亮菜单
    • CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有