欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

IE下模拟css3中的box-shadow 边框（阴影） 亲自做的 有大用 有大大用

shiping1 的头像
星期五, 2013-11-15 15:04 — shiping1

下面的代码是完全好的

横向偏移3像素，纵向偏移3像素，模糊4像素，颜色为纯黑

.xiaozhangshiping {
    background:#fff;/*必须要加上背景*/
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000000;
    -ms-filter\0: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/*最重要的事 这里的颜色必须为6位数 如果是3位数 效果就不对*/
}
.xiaozhangshiping{
 *+filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
/*最重要的事 这里的颜色必须为6位数 如果是3位数 效果就不对*/
}
.xiaozhangshiping{
 _filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
/*最重要的事 这里的颜色必须为6位数 如果是3位数 效果就不对*/
}

.aaaa{ box-shadow:0 0 5px rgba(0,0,0,0.1); } //有模糊效果 这是四周扩散的效果




.xiaozhangshiping{
padding: 8px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77ffffff', endColorstr='#77ffffff',GradientType=0 ),/*有了padding 再加边框 77表示十六进制的透明度 77后面的六位数是颜色代码*/
progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#000000'),/*在0度方向上加阴影*/ 
progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=90, Color='#000000'),/*在90度方向上加阴影*/
 progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=180, Color='#000000'),/*在180度方向上加阴影*/
 progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=270, Color='#000000');/*在270度方向上加阴影*/
}

/*下面这个我也不知道对ie有什么作用*/
:root .div{filter:none;}

下面的代码是完全好的
.xiaozhangshiping {
    background:#fff;/*必须要加上背景*/
    -moz-box-shadow: 3px 3px 4px #000;
    -webkit-box-shadow: 3px 3px 4px #000;
    box-shadow: 3px 3px 4px #000;
    -ms-filter\0: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";

/*最重要的事 这里的颜色必须为6位数 如果是3位数 效果就不对*/

}
.xiaozhangshiping{
 *+filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

/*最重要的事 这里的颜色必须为6位数 如果是3位数 效果就不对*/
}
.xiaozhangshiping{
 _filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');

/*最重要的事 这里的颜色必须为6位数 如果是3位数 效果就不对*/
}




    -webkit-box-shadow: 0 4px 5px  rgba(51,51,51,.4) inset;
    -moz-box-shadow: 0 4px 5px   rgba(51,51,51,.4) inset;
    box-shadow: 0 4px 5px   rgba(51,51,51,.4) inset;
    -ms-filter\0: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#333333')";
 
}
*html  .shadow{
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#333333');
}
*+html  .shadow{
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color='#333333');
}


下面的绝对有用
IE下模拟css3中的box-shadow（阴影）

时间：2010年04月29日作者：愚人码头查看次数:17,928 views评论次数：5条评论

css3中的box-shadow（阴影）可以查看：http://www.css88.com/archives/2136或者http://www.css88.com/tool/css3Preview/Box-Shadow.html

在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜

基本语法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

IE下模拟css3中的box-shadow（阴影）代码：

01.box-shadow{
02 
03filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/
04 
05background-color: #eee;
06 
07-moz-box-shadow:2px 2px 5px #969696;/*firefox*/
08 
09-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/
10 
11box-shadow:2px 2px 5px #969696;/*opera或ie9*/
12 
13}

演示地址：http://www.css88.com/demo/box-shadow/
来自 http://www.css88.com/archives/2240
 

下面的绝对有用


跨浏览器实现投影(box-shadow)那点事

标签: , , 
CSS 相关

对于投影的实现，其实有一个很好的方式，那就是利用 PNG 半透明效果。可惜，IE6 他不会让你这么做。当然，要实现的话，还是有可能的，只是，可能要绕很多圈。可是今天不是来绕圈的，而是来提供一个跨浏览器投影解决方案的。LOL。先来看一下效果：

 

 

我想，你可能首先想到的是 CSS 3 的 box-shadow。我也一样。对于 Gecko /  Webkit / Opera 的实现，想象中来说，有一个很理想的方案是一个表达式即可实现。像：

  1. box-shadow: 1px 3px 12px #aaa; 

一句话，这就是CSS 3 提供给我们的。多漂亮。可惜，可惜，可惜，目前来说也只有 Opera 能显示正常。FT。想到 -moz -webkit 这了前缀了没？没错，这一句需要变成：

  1. -moz-box-shadow: 1px 3px 12px #aaa; 

  2. -webkit-box-shadow: 1px 3px 12px #aaa; 

  3. box-shadow: 1px 3px 12px #aaa; 

看看。代码看起来就一坨坨的，多恶心。不过，至少实现了我们的效果。而且，还是比较好的效果。最囧的是，IE，甚至 IE 9，都没有 box-shadow。废话少说，抱怨并不会让你上面那几行代码在 IE 下正常显示。那，我们有什么好的方法来实现一个 fallback 吗? FILTER！！很多时候我都会想，至少是找到解决方法了，即使代码并不好看。是吧，比如这里使用 Glow 和 Shadow 来实现。

  1. /* gte ie8 */ 

  2. -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#eeeeee,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=135,strength=6)"; 

  3.  

  4. /* lte ie7 */  

  5. *filter: progid:DXImageTransform.Microsoft.Glow(color=#eeeeee ,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#bbbbbb,direction=135,strength=6); 

好了，投影投下来了，但结果却是这样的：

 

我们要的是 box-shadow，可不是 text-shadow 呢。杯具。改 Doctype、层级、XX 都不行。这整个都是个杯具。然后， 好吧。其实，你一定不耐烦了。给你一个方案吧。那就是给加个背景色。比如：

  1. // hack for ie  

  2. background: #fff; 

这样，终于，显示了。当然，如下图。这依然是个杯具。这样的澡点，我们又不是搞艺术的。我的目的很简单。只是为了实现跨浏览器的投影，一样的投影，为什么就这么麻烦呢？

 

囧。继续继续。既然 PNG 半透明对于 IE6 本身来说就是一个杯具，就让我们从这个有澡点的结果入手吧。其实，这个，Glow 是有那么点问题。那么… 这个 Shadow 不是显示挺好么。??? 明白了没？对，对，就是这样，利用 Shadow 的方向。不使用 Glow，直接投向 0 、 90 、180 、270 四个面，不就行了么？哦哈哈，先让我们来写下代码：

  1. /* gte ie8 */ 

  2. -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)"; 

  3.  

  4. /* lte ie7 */        

  5. *filter: progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10)progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6); 

结果，哈哈，自己测试吧。也附上全部代码：

测试页面：box-shadow demo

  1. /* hack for ie */ 

  2. background: #fff; 

  3.          

  4. /* sane web browsers */ 

  5. -moz-box-shadow:1px 3px 12px #bbb; 

  6. -webkit-box-shadow:1px 3px 12px #bbb; 

  7. box-shadow:1px 3px 12px #bbb; 

  8.          

  9. /* gte ie8 */ 

  10. -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6)"; 

  11.          

  12. /* lte ie7 */ 

  13. *filter:  

  14. progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=0,strength=6) 

  15. progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=10) 

  16. progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=10) 

  17. progid:DXImageTransform.Microsoft.Shadow(color=#eeeeee,direction=270,strength=6); 

话说，本来一句 box-shadow 就可以搞定的东西，竟然要写这么一坨很恶心的代码来实现。囧。同时，期待更好的方案！
来自 http://sofish.de/1426




下面的绝对有用

跨浏览器实现盒阴影(box-shadow)效果

发表于  由 admin

现在流行的设计里总是使用了大量的阴影，看看Vista、win7里夸张的box阴影，mac里的阴影比比皆是。CSS3的box-shadow属性可以让我们轻松实现图层阴影效果，使我们可以不再总是依赖于使用图片。

实现盒模型阴影的综合代码：

/*Internet Explorer*/background: #fff;/*Internet Explorer 8 */-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=0,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=90,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=180,strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC,direction=270,strength=6)";/*低于Internet Explorer 版本8*/*filter: progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=0, strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=90, strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC direction=180, strength=6) progid:DXImageTransform.Microsoft.Shadow(color=#CCCCCC, direction=270, strength=6);/*标准浏览器*/box-shadow:0px 0px 6px #CCC;

Shadow滤镜必须配合background属性一起使用，否则该滤镜失效

在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

Shadow滤镜的基本语法：

filter:Shadow(Color=color,Direction=direction,strength=strength)

  1. color代表投影的底色，该数值是用英文字母来代替的， 例如投影底色是蓝色的话，就应该设置color=blue。

  2. direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值45度为单位，它的默认值是向左的270度。

  3. strength设置或检索以对象为基准的在运动方向上的向外扩散距离。

box-shadow的基本语法：

box-shadow:<length> <length> <length> || <color>

box-shadow:X轴位移 Y轴位移 阴影大小 阴影颜色

在低于Firefox4、Chrome10的浏览器中实现阴影效果需要添加：

-moz-box-shadow: 0px 0px 6px #CCC;-webkit-box-shadow: 0px 0px 6px #CCC;

Related posts:

  1. IE6中实现png alpha透明的方法

  2. 支持Firefox,IE6.0,IE7.0,IE8.0的CSS透明滤镜

  3. 如何在html中用IE条件判断表达式判断IE版本

  4. 项目列表ul、li子元素浮动IE6 bug

  5. 深入理解 display:inline-block

来自 http://www.w3cmm.com/notepad/box-shadow.html

 

 


普通分类: 
div+css
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2