`
yudan215
  • 浏览: 22126 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS实现跨浏览器兼容性的盒阴影效果

 
阅读更多
在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。

对于目前对CSS3支持如狗屎的孤芳自赏的IE浏览器怎么办呢?box-shadow属性对于IE浏览器就像是圣诞树上的彩灯——装饰而已。
好在IE浏览器有个IE shadow滤镜,是IE浏览器私有的一个东西,可以模拟还凑合的盒阴影效果,使用类似于下面的代码:

.shadow {
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}


浏览器支持情况

    Firefox 3.5+
    Safari 3+
    Google Chrome
    Opera 10.50
    Internet Explorer 5.5
分享到:
评论

相关推荐

    css实现跨浏览器的box-shadow盒阴影效果告别图片实现类似效果(2)

    一、前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章——“CSS实现跨浏览器兼容性的盒阴影效果”,本文虽然题目类似,但是核心部分是有差异的。前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,...

    第四章 网页边框和网页文字阴影.docx

    三、浏览器兼容性 在使用 CSS3 的阴影效果时,需要注意浏览器的兼容性问题。在前面的介绍中,我们已经声明,并不是所有的浏览器都支持 CSS3。最好的支持 CSS3 阴影效果的浏览器是 Safari,也就是说,我们现在只需要...

    CSS3实现圆角、阴影、透明效果并兼容各大浏览器

    圆角、阴影、透明的实现方法有很多,之前的获取比较复杂,用CSS3就方便很多了,而且对浏览器的支持性也比较好,下面简单为大家介绍下

    详解CSS3的图层阴影和文字阴影效果使用

    浏览器兼容性:不同的浏览器兼容性不同,mozilla内核的浏览器写法如下(但新版本的火狐浏览器已经不需要再添加):-moz-box-shadow:阴影类型 X水平偏移(可取正负值) Y垂直偏移(可取正负值) 阴影大小 阴影扩展 阴

    JQuery&CSS;&CSS;+DIV实例大全.rar

    9.jquery仿google首页图标动画菜单效果实现模拟鼠标动画菜单的代码 10.jquery仿卓越亚马逊网鼠标移到按钮弹出菜单的效果代码 11.jquery浮动变化的个性菜单插件floatmenu下载 12.jQuery黑色风格仿Flash版下滑...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    107. 推荐jQuery模拟Windows视窗的效果实现相册图片拖动特效插件 108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery...

    用css滤镜实现的文字描边效果的代码

    Dropshadow滤镜可以生成一个阴影效果,感觉是文字在背景上浮动着。我们可以通过设置offx、offy、color等属性来控制阴影的位置、大小和颜色。 在我们提供的代码中,我们使用了四个Dropshadow滤镜来生成文字描边效果...

    css中文参考手册

    兼容性列表涉及浏览器及版本众多; 草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案...

    《CSS全程指南》随书光盘

    13.2 浏览器兼容性 292 13.2.1 CSS hack技术 292 13.2.2 盒模型 298 13.2.3 浮动模型 303 13.2.4 IE 3px Bug 306 13.2.5 IE文字溢出现象 307 13.2.6 IE6 Peekaboo Bug(捉迷藏) 309 13.2.7 IE6 Guillotine Bug...

    CSS3.0中文参考手册

    兼容性列表涉及浏览器及版本众多; 草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案...

    CSS 3.0 参考手册压缩文件 放心非病毒

    兼容性列表涉及浏览器及版本众多; 草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案...

    使用Div+CSS纯图片实现圆角矩形的方法小结

    你或许会不以为然,可是我想告诉你的是即使将来CSS3圆角实现全浏览器兼容,但在当下图片圆角依旧是主流,丰富的图片效果(渐变、阴影、透明度、圆角、浏览器兼容、开发维护效率)这些是用代码实现远远不可比拟的。...

    CSS 3.0 中文参考手册

    兼容性列表涉及浏览器及版本众多; 草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去。 而这本的手册从基础语法到示例制作,都是根据W3C工作...

    CSS 参考手册中文版 3.0

    兼容性列表涉及浏览器及版本众多; 草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作草案...

    最新的CSS参考手册3.0版本

    3.兼容性列表涉及浏览器及版本众多; 4.草案中的Grid布局被业界同仁普遍认为比“天书”还难… CSS3 还是草案,中文资料少之又少,基本上都是一篇内容转来转去,而我们的手册从基础语法到示例制作,都是根据W3C工作...

    CSS 3.0 中文参考手册,层叠样式表下载.rar

    备受期待的 CSS 3 新功能 圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa - 加入透明色、文字阴影等等 CSS3 的出现,让代码更简洁、页面结构更合理,性能和效果得到兼顾。

    100多个JQuery效果示例(实例)div+css+javascrpit

    63. [荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64. [荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65. 一款jQuery仿flash放大图片的相册插件 66. 一款jQuery仿苹果mac os系统经典...

    详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用

    要使用标准的CSS3实现某元素的投影效果,有两个套路,第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow,那这两个阴影实现有什么具体的差异呢? 一、兼容性不一 CSS3 box-shadow从...

    css入门笔记

    大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范...

Global site tag (gtag.js) - Google Analytics