`
hegz
  • 浏览: 441274 次
  • 性别: Icon_minigender_1
  • 来自: 茂名
社区版块
存档分类
最新评论

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

阅读更多
.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');
}

 

<img class="shadow" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
 

效果:

 

文章链接:http://www.zhangxinxu.com/wordpress/?p=711


演示实例:http://www.zhangxinxu.com/study/201004/cross-brower-box-shadow.html

 

 

分享到:
评论

相关推荐

    别具光芒——CSS属性、浏览器兼容与网页布局

    "别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念:CSS属性、浏览器兼容性和网页布局。 首先,我们来详细探讨CSS属性。CSS提供了无数的属性,如颜色、字体、大小、位置等,这些属性共同决定...

    css兼容包-CSS圆角、阴影

    随着技术的发展,CSS引入了许多高级特性,如圆角和阴影,但这些特性在早期的浏览器中可能不被支持,这就需要特殊的解决方案来实现跨浏览器兼容性。"css兼容包-CSS圆角、阴影"正是为了解决这个问题而存在的。 标题中...

    如何让css在所有浏览器下兼容

    #### 三、解决具体CSS属性的兼容性问题 **1. CSS3属性** 对于新的CSS3属性,不同浏览器的支持情况也不同。例如: - **圆角** - IE:不支持标准的`border-radius`,但可以通过滤镜实现类似效果。 - Firefox:...

    CSS BUG浏览器兼容知识汇总

    为确保跨浏览器兼容性,需要为这些新特性添加相应的前缀。 2. **盒模型差异** IE6及以下版本采用的盒模型(IE盒模型)与W3C标准盒模型存在冲突。在标准盒模型中,元素的宽度和高度只包含内容区域,而IE盒模型则...

    前端不同浏览器兼容性解决办法

    在前端开发过程中,浏览器兼容性问题常常困扰着开发者。不同的浏览器对HTML、CSS、JavaScript的解析和执行方式存在差异,导致同一代码在不同浏览器中显示或运行效果不一致。本篇将详细介绍如何处理IE、Firefox(FF)...

    纯CSS3炫酷元素盒阴影效果插件shadow.css

    3. **兼容性**:由于`shadow.css` 基于CSS3,所以它通常适用于支持CSS3的现代浏览器,如Chrome、Firefox、Safari、Edge等。对于不支持CSS3的老版本浏览器,可能无法显示这些效果,开发者在使用时应考虑这一因素,...

    浏览器兼容性测试

    1. **使用跨浏览器框架和库**:如Bootstrap、jQuery等,它们已经处理了大部分浏览器兼容性问题。 2. **优雅降级和渐进增强**:为现代浏览器提供高级功能,同时确保基本功能在旧版浏览器中仍能工作。 3. **使用工具...

    CSS3实现圆角阴影渐变效果兼容IE等浏览器

    本文将深入探讨如何利用CSS3实现圆角、阴影和渐变效果,并确保这些效果在包括IE在内的主流浏览器中都能得到良好的兼容性。 首先,我们来讨论CSS3的圆角效果。在CSS3之前,为了实现圆角,开发者通常需要使用大量的...

    各种浏览器的兼容性

    在IT领域,浏览器兼容性是开发网页或网络应用时必须考虑的重要因素。不同的浏览器由于内核、解析方式以及实现标准的差异,可能会导致相同代码在不同浏览器上展示或运行的效果不尽相同。以下是对"各种浏览器的兼容性...

    最全的CSS浏览器兼容问题

    这个资源“最全的CSS浏览器兼容问题”显然是一个非常实用的文档,它详细列举了在开发过程中可能遇到的各种CSS兼容问题及其解决方案,旨在帮助开发者更好地处理跨浏览器的样式问题。 首先,我们需要理解浏览器兼容性...

    css圆角,阴影,支持ie/firefox/chrome等全部浏览器

    对于跨浏览器兼容性,现代浏览器如Firefox、Chrome、Safari和Opera都对CSS3的box-shadow属性提供了良好的支持。然而,IE9及以下版本不支持此属性。为了解决这个问题,可以使用渐进增强的方法,为不支持box-shadow的...

    别具光芒css属性浏览器兼容与网页布局源代码

    3. **浏览器兼容性**:不同的浏览器对CSS的支持程度不同,开发者需要了解各大主流浏览器(如Chrome、Firefox、Safari、Edge和IE/EdgeChromium)对新特性的支持情况。可以借助工具如Can I Use来检查CSS属性的兼容性。...

    CSS3实现漂亮的迷你立体阴影效果的导航条

    为了进一步优化兼容性,可以考虑使用JavaScript库如Modernizr检测CSS3支持,或者使用渐进增强技术,为不支持CSS3的浏览器提供一种回退方案,比如使用图片或传统CSS2技术实现阴影效果。 在实际项目中,可以结合HTML5...

    对常见的css属性进行浏览器兼容性总结(推荐)

    对于box-shadow属性,它在添加阴影效果方面非常有用,支持情况与border-radius类似,IE9及以上版本的浏览器兼容性良好,而对于IE8及更早版本的浏览器,同样需要特殊处理或者使用替代方案。background-size属性用于...

    用CSS为表格添加阴影效果.rar

    然而,为表格添加阴影时,需要考虑到浏览器兼容性和表格的复杂性。有时,表格内的边框和单元格可能会干扰阴影的显示。为解决这个问题,可以调整单元格的边框样式,或者使用伪元素(如 `::before` 和 `::after`)来...

    DIV圆角+阴影+浏览器兼容

    `DIV`圆角、阴影以及浏览器兼容性是前端开发中的常见问题,尤其是在跨浏览器的场景下。本文将深入探讨如何实现`DIV`的圆角、阴影效果,并确保在不同浏览器上具有良好的兼容性。 首先,我们来谈谈`DIV`的圆角。在CSS...

    css常用效果处理(兼容多浏览器)

    最后,为了更好地进行浏览器兼容性测试,可以使用如BrowserStack、IEtester或Can I Use网站,它们能提供实时预览和特性支持情况。同时,编写CSS时保持简洁和模块化,利用预处理器如Sass或Less,可以简化代码并提高...

    jQuery css3猎豹浏览器宽屏banner焦点图切换代码

    在这个宽屏banner中,CSS3被用来实现平滑的过渡效果、圆角、阴影以及自定义字体等视觉增强效果。特别是CSS3的transition和animation属性,可以创建无插件的动态效果,如图片淡入淡出、滑动等。 3. 宽屏设计: 宽屏...

Global site tag (gtag.js) - Google Analytics