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

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

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

本文主要包含ie css3.htc,ie css3.htc下载,css3兼容ie,ie css3,ie css3.htc怎么用等相关知识,佚名 希望在学习及工作中可以帮助到您
一、开始的擦边话
为了测试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浏览器下效果为:
Firefo
  <script async src=

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

  • 使用CSS3配合IE滤镜实现渐变和投影的效果
  • IE滤镜与CSS3效果(详细整理分享)
  • IE兼容css3圆角的实现代码
  • IE下实现类似CSS3 text-shadow文字阴影的几种方法
  • 让IE可以变相支持CSS3选择器

相关文章

  • 2017-06-02CSS3教程:新增加的结构伪类
  • 2017-06-02一款利用纯css3实现的超炫3D表单的实例教程
  • 2017-06-02css3实现一款模仿iphone样式的注册表单
  • 2017-06-02CSS3哪些新特性值得称赞
  • 2017-06-02CSS3 Columns分列式布局方法简介
  • 2017-06-02CSS3实现瀑布流布局与无限加载图片相册的实例代码
  • 2017-06-02CSS3 Flexbox中flex-shrink属性的用法示例介绍
  • 2017-06-02深入浅出CSS3 background-clip,background-origin和border-image教程
  • 2017-06-02用CSS3实现背景渐变的方法
  • 2017-06-02CSS3制作hover下划线动画

文章分类

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

最近更新的内容

    • CSS3弹性伸缩布局之box布局
    • 用CSS3实现Win8风格的方格导航菜单效果
    • 支持IE8的纯css3开发的响应式设计动画菜单教程
    • css sprite简单实例
    • 纯CSS3打造动感漂亮时尚的扇形菜单
    • CSS3 text shadow字体阴影效果
    • 纯CSS3实现图片无间断轮播效果
    • 使用css3实现的windows8开机加载动画
    • 一款CSS3实现多功能下拉菜单(带分享按)的教程
    • 常用的四种CSS透明属性介绍

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

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