注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

兼容浏览器的CSS3阴影效果  

2013-09-09 11:39:31|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一. 在对于CSS3的阴影效果,很多同学都已经使用过了,如:下图的效果

兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客(来源:chrome截图)
CSS3的代码如下:
 
兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客
 
解释为:横向偏移2像素,纵向偏移3像素,模糊4像素,颜色为纯黑。

模糊取值不能是负数;
横向偏移为正数,则阴影在右侧,为负数,则阴影在左侧;
纵向偏移为正数,则阴影在下侧,为负数,则阴影在上侧;

二. 对于标准浏览器及IE9+的支持效果都很不错,但是对于IE8以下就不支持了。不过我们可以采用IE的独门秘技IE shadow滤镜来实现还算凑合的盒阴影效果。
如下图:
兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客

滤镜代码如下:
兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客
 
解释为:颜色为纯黑,偏移模糊为4像素,方向为90度,180度。

Direction值为0阴影在上侧,为90阴影在右侧,为180阴影在下侧,为270阴影在左侧。

三. 在使用IE shadow滤镜时我们可能会遇到下面的问题:

兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客
 
相关滤镜代码如下
兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客

在对文字的容器应用滤镜时发现它的展示效果跟text-shadow类似。那如果解决,可以加个白色背景色即可。

代码更新如下:
兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客
 
 最终展示效果:
兼容浏览器的CSS3阴影效果 - 冰果 - 前端攻城师 郭培的博客

 赞一个,哈哈。

需要注意:如果你的电脑装了IE10,则模拟出来的IE版本不在支持IE shadow滤镜,假如你还装了360安全或360急速则相应的IE内核也都不在支持IE shadow。不过没有关系因为它们都已经支持了box-shadow,所以不用担心,哈哈。

四. 兼容写法:

-webkit-box-shadow: 2px 3px 4px #000;
-moz-box-shadow: 2px 3px 4px #000;
box-shadow: 2px 3px 4px #000;
filter:
progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#000000, Strength=4, Direction=180);

浏览器支持情况:

Firefox3.5+; Safari 3+ ;Chrome;Opera 10.50;IE6+
  评论这张
 
阅读(3254)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017