如题,如何相对完美的在几大主流浏览器中实现相似的shadow效果?
分两种情况:
text-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:
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属性达到效
果。