关于阴影这个效果,IE和W3C都有实现的代码,但效果却不统一(以W3C的效果为主)。

W3C实现代码:box-shadow: 水平偏移 垂直偏移 阴影模糊值 阴影外延值 insert(是否内阴影);

IE的阴影实现代码:progid:DXImageTransform.Microsoft.Shadow(color=颜色, direction=角度, strength=阴影强度);

但IE的阴影看起来有点恶心,而且还不可以设置模糊值。可以点击这里查看

所以,要想效果跟W3C的效果接近,可以利用IE滤镜的模糊效果达到

IE的模糊效果实现代码:filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);

实现原理是新建一个层,加模糊效果作为阴影,实现如下:

.outer{
    position:relative;
    font-size:0;
    width:182px;
    height:137px;
    margin:0 0 50px 5px;
}
.outer .w3cShadow {
    position:relative;
    border:1px solid #000;
    box-shadow: 0 0 10px #000000;
}
.outer .ieShadow{
    display:none;
    display:block\9;
    background:#000\9;
    /* ie78 通过定位自适应宽高 */
    position:absolute;
    left:-5px;
    top:-5px;
    right:5px;
    bottom:5px;
    /* ie6 需要指定宽高 */
    _width:182px;
    _height:137px;
    filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5);
    /* for ie8 标准模式 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
}

///外阴影

<div class="outer"><div class="ieShadow"><!--利用IE滤镜模糊效果模拟阴影--></div><div class="w3cShadow"><img src="../images/rose.jpg" width="180" height="135"></div>
</div>

.inner{
    position:relative;
    width:182px;
    font-size:14px;
    margin:0 0 50px 5px;
}
.inner .w3cShadow {
    position:relative;
    background:#000\9;
    padding:10px;
    border:1px solid #000;
    box-shadow: 0 0 10px #000000 inset;
}
.inner .ieShadow{
    display:none;
    display:block\9;
    background:#fff\9;
    /* ie78 通过定位自适应宽高 */
    position:absolute;
    left:-5px;
    top:-5px;
    right:5px;
    bottom:5px;
    /* ie6 需要指定宽高 */
    _left:-15px;
    _width:180px;
    _height:132px;
    filter:progid:dXImageTransform.Microsoft.blur(pixelradius=5);
    /* for ie8 标准模式 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
}

.inner .content{
    position:relative;
    z-index:1;
}

内阴影

<div class="inner">
    <div class="w3cShadow">
        <div class="ieShadow"><!--利用IE滤镜模糊效果模拟阴影--></div>
        <div class="content">
            我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影我是内阴影
        </div>
    </div>
</div>

转载于:https://www.cnblogs.com/evablog/archive/2013/04/02/2995882.html

转载:兼容IE的内阴影和外阴影效果相关推荐

  1. CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)...

    CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...

  2. CSS3 box-shadow 效果大全(内阴影,外阴影,三边阴影,双边阴影,单边阴影,细线描边…)

    CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...

  3. html5 头部阴影,兼容各种主流浏览器的CSS阴影效果

    CSS阴影效果(Box shadows)应用在Web页面设计上已经有了一段时间了.之前在CSS2阶段阴影效果还不是很有效之时,大部分的这种效果都是使用Photoshop图片实现的,但对于一些缺乏这些绘 ...

  4. CSS_09_盒子模型(二)

    CSS3盒模型 box-sizing设置盒子类型,默认盒子模型为content-box,css3增加了border-box,这样计算盒子的大小方式也发生改变. box-sizing:content-b ...

  5. 网站推广中增加外链的八个技巧

    增添网址外链是搜刮引擎优化进程中必不成少的一部分,在完成网址搜刮引擎优化团体结构之后,外链的培植就必必要思量了,而且外链的培植是一个连续的进程,康健的外链对晋升网址关头字排名很是有利.可是,许多人尤其 ...

  6. 一点就分享系列(实践篇6——上篇)【迟到补发_详解yolov8】Yolo-high_level系列融入YOLOv8 旨在研究和兼容使用【3月份开始持续补更】

    一点就分享系列(实践篇5-补更篇)[迟到补发]-Yolo系列算法开源项目融入V8旨在研究和兼容使用[持续更新] 题外话 [最近一直在研究开放多模态泛化模型的应用事情,所以这部分内容会更新慢一些,文章和 ...

  7. android 8.0名字,外媒:Android 8.0可能命名为燕麦饼干

    每当一代全新的Android系统推出时,我们都热衷于给它起一个好吃的甜品名字,这也是谷歌一向的传统.据外媒报道,虽然谷歌还没有为Android 8.0起好代号,但oatmeal cookie(燕麦饼干 ...

  8. Win7下,Office 2010和Adobe Acrobat Professional 8.1不兼容:PDFMaker文件遗失

    转自:http://againinput4.blog.163.com/blog/static/172799491201112284712656/ [已解决]Win7下,Office 2010和Adob ...

  9. oracle外键约束强行insert,oracle 禁用外键约束

    1.ORACLE数据库中的外键约束名都在表user_constraints中可以查到.其中constraint_type='R'表示是外键约束. 2.启用外键约束的命令为:alter table ta ...

  10. css3 box-shadow 盒子效果

    css3 box-shadow 盒子效果 (2014-02-13 16:57:25) 转载▼ 标签: it 分类: Other 简单的外阴影 最简单的外阴影效果就是x和y的偏移值设置为0,然后设置模糊 ...

最新文章

  1. 数据存储方式_寻找要操作数据的存储地址的过程称为寻址,几种寻址的方式分享...
  2. 从一段代码的汇编看计算机的工作原理
  3. oracle 导出数据 utl,【原创】利用utl_file包进行表数据导出
  4. [数据库] Oracle单表查询总数及百分比和数据横向纵向连接
  5. 常用的正则表达式---学习笔记(一)
  6. macos sierra怎么升级到catalina_Mac os 下 Pyhon 库老是安装失败?
  7. c语言如何将字母向下移一格,c语言 如何将一个字符串的前n个字母后移至尾,其他的按顺序前移?...
  8. 双蓝牙(HC-05、HC-06)AT指令配对教程
  9. Merkle Tree与区块链
  10. 安装AdventureWorks2008R2示例数据库
  11. python中多态是什么意思_python类的多态是什么
  12. c++编写乘法口诀表
  13. 【工具篇】---2DTileMapLevelEditor地图编辑器
  14. 服务器开启虚拟控制台
  15. 在三人易行学习PLC编程有什么好处?
  16. Eclipse Console 乱码
  17. Java Map以及HashMap、TreeMap、HashTable
  18. predis操作redis方法大全
  19. Python自学笔记——基础篇
  20. 分享65个NET源码,总有一款适合您

热门文章

  1. 在BetterZip的收藏夹中如何添加经常使用的文件夹?
  2. 如何测试MacBook的电池
  3. 【小家Java】Future与FutureTask的区别与联系
  4. jsjquery避免报错的方法
  5. MongoDB,无模式文档型数据库简介
  6. 在Win8.1系统下如何安装运行SQL Server 2005 (以及安装SQL Server 2005 Express打补丁)...
  7. awk学习笔记(8) - 简单的正则匹配
  8. 用python把unix格式转换成windows格式
  9. asp.net中时间差的问题
  10. 觉得做人累了就看看这些!不是社会错了,是你错了!写的超好!