如题，如何相对完美的在几大主流浏览器中实现相似的shadow效果?
从ff3.5，safari1.1，opera9，chrome2开始，支持text-shadow:color offX offY blur属性，ie的话可以用filter:progid:DXImageTransform.Microsoft.Shadow(color, direction, strength)以及filter:progid:DXImageTransform.Microsoft.Glow(color, strength)的各种组合来模拟。
box-shadow:offX offY blur color属性在safari3，chrome2中使用-webkit-box-shadow，ff3.5中使用-moz-box- shadow，opera10.5直接使用box-shadow，ie的话要想相对完美的模拟，需要额外的wrapper元素来辅助。 因为DropShadow ，Shadow，Glow这三种滤镜都有着一定的缺点，所以这次祭出了Blur，通过对wrapper元素设置Blur滤镜及background属性达到效 果。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style> <!-- #div { width: 100px; height: 100px; } .shadow { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=5,MakeShadow=true,ShadowOpacity=0.25); background: #fff\9; margin: -5px 0 0 -5px\9; padding: 5px 0 0 5px\9; } .shadow #wrapper { background: #fff; width: 100%; height: 100%; position: relative; } --></style> </head> <body> <div id="div" class="shadow"> <!--[if IE]> <div id="wrapper"> <![endif]--> abcd <!--[if IE]> </div> <![endif]--> </div> </body> </html>
运行代码
posted on 2010-03-09 16:37 nozer0 阅读(374) 评论(2) 编辑 收藏 举报
Powered by: 博客园 Copyright © 2024 nozer0 Powered by .NET 8.0 on Kubernetes
，Shadow
，Glow
这三种滤镜都有着一定的缺点，所以这次祭出了Blur，通过对wrapper元素设置Blur滤镜及background属性达到效
果。