`

有关于给图片设置阴影,兼容ff与ie

阅读更多

CSS代码:
.baseBlock{
    width:220px;
    position:relative;
}
.baseBlockIn{
    padding:10px 15px;
    background:#a0b3d6;
    box-shadow:10px 10px 5px #444;
    -moz-box-shadow:10px 10px 5px #444;
    -webkit-box-shadow:10px 10px 5px #444;
    position:relative;
    z-index:1;
}
.ieShadow{
    _width:220px;
    _height:220px;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
    background-color:#444\9;
    position:absolute;
    left:5px;
    top:5px;
    right:-5px;
    bottom:-5px;
}
HTML代码:
<div class="baseBlock">
    <div class="baseBlockIn">昨晚请多玩优秀员工吃饭,聊了几点职场体会。(1) 把自己当老板看,象老板一样拼命干活,能力自然就提高了。有了能力,假如多玩不能给你好的回报,其他公司一定会给。(2) 不是每次付出就一定有回报,但是不断付出就一定会有回报。@李学凌 补充了一点:象你的老板一样思考,能力会提高得更快。 </div>
    <div class="ieShadow"></div>
</div>


 

分享到:
评论

相关推荐

    全面的IE6_7_8_FF样式兼容

    在网页开发过程中,浏览器兼容性始终是一个不可忽视的重要问题,特别是对于旧版本的 Internet Explorer (IE) 和 Firefox (FF)。"全面的IE6_7_8_FF样式兼容"资源正针对这一挑战提供了详尽的解决方案。以下是关于这些...

    备忘:兼容ff和ie的鼠标样式+javascript字符串hash+浮动提示

    标题中的“兼容ff和ie的鼠标样式”指的是在网页开发中如何实现鼠标指针效果在Firefox(火狐浏览器)和Internet Explorer(IE浏览器)之间的兼容性。由于不同的浏览器对CSS样式的支持存在差异,开发者需要编写特定的...

    兼容FF,IE等浏览器的弹出层教程

    功能描述 功能性 1.是否显示标题栏 ...3.是否显示关闭按钮 4.是否固定定位 5.自定义设置窗体弹出位置 6.是否显示遮罩层 7.遮罩层颜色设置 8.遮罩层透明度设置 9.窗口层叠顺序设置,以...2.ie6中窗体模拟固定定位的缓动效果

    浏览器兼容(支持IE和firefox)

    6. **CSS3属性**:如渐变、阴影、圆角等在IE6和Firefox早期版本中不支持,需要使用图片或者渐进增强的方式来实现。 7. **PNG透明度**:IE6不支持PNG24位的透明,需要使用`AlphaImageLoader`滤镜解决。 8. **事件...

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

    3. Box Model:IE与其他浏览器对Box Model的处理有差异,IE采用包含边距的模型,而其他浏览器遵循W3C标准。可以通过设置`box-sizing`属性统一盒模型,例如:`box-sizing: border-box;`。 4. IE滤镜(Filters):...

    全面兼容ie6,ie7,ie8,ff的最简单的css写法

    在网页设计领域,CSS(层叠样式表)的兼容性问题一直是一大挑战,尤其是在处理不同浏览器,尤其是IE(Internet Explorer)系列与Firefox等其他浏览器之间的差异时。本篇文章将探讨如何实现对IE6、IE7、IE8及Firefox...

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

    阴影的概念从 CSS2 就开始有了,但是只有 Safari 一个浏览器支持它,到现在依然是这样。在 CSS3 中,阴影可以应用在边框和文字上,就像图片的阴影效果一样。 二、border-color 和阴影 网页边框色彩一般可以分为 ...

    让IE支持CSS3的不完全兼容方案

    标题中的“让IE支持CSS3的不完全兼容方案”指的是针对Internet Explorer(尤其是早期版本)对CSS3标准不完全支持的问题,所采取的一种通过特定技术手段实现部分CSS3特性的方法。IE浏览器在CSS3规范刚推出时,尤其是...

    可以使你网页图片圆形显示的CSS代码

    `line-height` 设置为与高度相同的值也有助于内容在容器中垂直居中。 #### 二、扩展应用与注意事项 1. **扩展属性**: - **`overflow`**:可以设置为 `hidden` 来隐藏超出容器的部分,确保圆形边缘没有多余内容...

    用JS实现网页元素阴影效果的研究总结

    - **IE/NS**: 创建一个与元素相同大小的层,通过偏移使其产生阴影,然后将这个层定位到元素的下方,设置`z-index`为-1,让元素覆盖它。 - **FF/Opear**: 由于这些浏览器不支持`z-index`负值,作者采取了不同的策略...

    浅析几个CSS3常用功能的写法

    在本文中,我们将深入探讨CSS3的一些常用功能,包括圆角、盒状阴影和线性渐变,这些都是现代网页设计中不可或缺的元素。由于不同浏览器对CSS3的支持程度不一,因此在实际应用中需要考虑兼容性问题。 首先,我们来看...

    编辑器 KindEditor 4.0.4

    改善: [IE] 弹出框支持阴影效果。 Bugfix: 浏览器使用有些插件时,上传文件提示不正确。 Bugfix: 单独调用图片功能时,点击重置大小图标报错。 Bugfix: 设置了参数filterMode:true,分页符就会丢失样式。 Bug...

    【css新增特性思维导图梳理】

    [endif]--&gt;`) 针对不同版本的IE浏览器设置样式,例如: ```html &lt;!--[if IE]&gt; .test {color: red;} &lt;![endif]--&gt; ``` - **属性级hack**:在CSS属性名前添加特殊字符,如 `_` (仅IE6及以下)、`*` (仅IE7及...

    css 文字投影.

    一般情况下,阴影颜色应该与背景色形成对比,同时又与文本颜色相协调。 4. **响应式设计**:在移动设备上,过大的阴影效果可能会显得过于突出。可以考虑根据屏幕尺寸调整阴影的大小和模糊程度。 通过以上内容的...

    CSS 文字加阴影变3D效果演示

    这模拟了文字的另一侧,颜色设置为`#2984ff`,与模糊的文字形成对比,从而营造出3D立体感。 同样,另一个例子使用了`Alpha`和`Blur`滤镜来创建不同的3D效果: ```html ; height: 70; color: lightskyblue; filter:...

    CSS3伪三维径向圆形按钮

    关于浏览器兼容性,本教程中所用到的CSS3特性在Opera和Firefox中都有良好的支持。对于IE9及以上版本,大部分特性也能正常工作,但需要注意的是,IE9并不支持CSS3的`radial-gradient`,可以使用渐变图片作为备选方案...

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

    分享jquery带阴影效果折叠菜单dropdown给大家 33.分享下载jquery+Css黑色风格版的手风琴菜单,带动感效果 34.分享一款jquery收缩展开的多级导航(附带手风琴效果示例) 35.国外漂亮动感jquery三级导航菜单插件...

    网上商店的CSS页面布局

    在实现这些效果时,要考虑浏览器兼容性问题,尤其是对老版本的IE浏览器。可以使用条件注释或者工具如autoprefixer来处理CSS的浏览器前缀。同时,为确保用户在没有Flash支持的情况下也能访问网站,建议提供替代内容。...

Global site tag (gtag.js) - Google Analytics