昨天由于工作关系,遇上了这个问题,苦恼一日无解——残念。

所幸终于在今天早上得到了解决,遗憾的是灵活性不够强,不能根据内容自适应,要配合JS才能达到自适应效果

不过总结到这里已经很满意了,毕竟规律已经摆在那里,shadow和content的宽高比main小10px就OK了

当然,具体阴影效果做调整后,其他属性值也得作相应调整,遵循此消彼长原则便可

还有的不足就是,不支持过低版本的FF和Chrome

但估计用这两种浏览器的人,都不会沉沦于低版本的吧,毕竟FF和Chrome的用户群与IE用户群是有所区别的

<style type="text/css">
.main{
width:250px;
height:200px;
overflow:hidden;
position:absolute;
top:100px;
left:100px;
}
.shadow{
background:#FFF;
width:240px;
height:190px;
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
box-shadow:0px 0px 10px rgba(0, 0, 0, 0.2);
margin:5px -5px -5px 5px;
margin:0px\9;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.20');
}
:root .shadow{
margin:5px -5px -5px 5px;
filter:none;
}
.content{
position:absolute;
width:240px;
height:190px;
margin:5px;
top:0;
left:0;
background:#FFF;
}
</style> <div class="main">
<div class="shadow"></div>
<div class="content"></div>
</div>

兼容IE6-9,FF,Chrome的box-shadow效果(纯CSS)的更多相关文章

  1. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  2. marquee标签跑马灯连续无空白播放效果 纯CSS(chrome opera有效)

    marquee似乎没有设置首尾相连播放的属性,内容滚动时总会留出一段marquee本身长度的空隙,某些情况下很不方便: 捣鼓了一会,得出一种解决办法,关键有两点: 1.将需要滚动的内容复制一份于同一行 ...

  3. JavaScript日历控件!JS兼容IE6.7.FF.可挡住下拉控件

    原文发布时间为:2009-08-22 -- 来源于本人的百度文章 [由搬家工具导入] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  4. 利用after和before伪类实现chrome浏览器tab选项卡斜边纯css无图制作笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 最全的CSS浏览器兼容问题【FF与IE】

    1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: cent ...

  6. min-height最小高度的实现(兼容IE6、IE7、FF)(解决IE6不兼容min-height)

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  7. [转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips

    使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo,如果使用截取函数,源代码中的标题是显示不完整的,即便是在title属性 ...

  8. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...

  9. 原生js绑定和解绑事件,兼容IE,FF,chrome

    主要是最近项目中用到了原生的js 解绑和绑定 事件  然后今天研究了一下,其实问题不大,不过要注意不要把单词写错了,今天我就找了好久单词写错了. 需求:当鼠标移上去以后,给Select加载元素,接着解 ...

  10. 在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome

    在页面左右一个悬浮div兼容IE6 IE7 8 9 Firefox chrome #identifier-pannel { bottom: 345px; margin-left: 512px; pos ...

随机推荐

  1. php 与java安卓客户端的查询交互

    PHP 服务器端: function getids() { $this->output->set_header('Content-Type: application/json; chars ...

  2. 《JavaScript权威指南》(第6版)翻译错误集 更新中。。。

    §6.2.2  P126 原文:If o inherits x,and that property is an accessor property with a setter method. 原译:如 ...

  3. [HTTP]Nonocast.http post方法

    Nonocast.Http is a free, open source developer focused web service via http for small and medium sof ...

  4. [Perl]Can't link/include C library 'ft2build.h', 'freetype', aborting.

    原文:http://www.code-by.org/viewtopic.php?f=60&t=284 错误提示 Font-FreeType-0.07>perl Makefile.PL B ...

  5. Mayor's posters 线段树区间覆盖

    题目链接 http://poj.org/problem?id=2528 Description The citizens of Bytetown, AB, could not stand that t ...

  6. D. Magic Box(几何)

    One day Vasya was going home when he saw a box lying on the road. The box can be represented as a re ...

  7. jquery展开收缩列表

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  8. 接口测试:添加header信息

    一.获取所有学生信息的接口文档内容 二.使用postman进行测试 选择请求方式.填写URL.填写Headers下的参数值(key是Referer.value是接口文档中的value值) 三.使用jm ...

  9. leecode刷题(14)-- 有效的字母异位词

    leecode刷题(14)-- 有效的字母异位词 有效的字母异位词 描述: 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词. 示例 1: 输入: s = " ...

  10. ACM-ICPC 2018徐州网络赛-H题 Ryuji doesn't want to study

    死于update的一个long long写成int了 真的不想写过程了 ******** 树状数组,一个平的一个斜着的,怎么斜都行 题库链接:https://nanti.jisuanke.com/t/ ...