锁定老帖子 主题:CSS生成跨浏览器的阴影效果
精华帖 (0) :: 良好帖 (5) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2010-03-10
最后修改:2010-03-10
<style type="text/css"> div.shadows { margin: 3em auto; width: 25em; font-size: 1.2em; padding: 1em; background: #fff; border: 1px solid #ccc; } div.shadows p { margin: 0; font: 100% Helvetica, Arial, sans-serif; } div.shadows { -moz-box-shadow: 2px 2px 10px #000; -webkit-box-shadow: 2px 2px 10px #000; } </style> <!--[if IE]> <style type="text/css"> div.shadows { -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6)"; filter: progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3) progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=6); } </style> < ![endif]--> <div class="shadows"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> 通过几个CSS语句的使用,轻松就实现了阴影效果。 最最重要的是,支持所有的主流浏览器,尤其是IE6,这个可就真的太难得了。 效果请看这里 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2010-03-10
效果蛮不错的,谢谢楼主的分享
|
|
返回顶楼 | |
发表时间:2010-03-10
不支持ie8
|
|
返回顶楼 | |
发表时间:2010-03-11
ccyingfu 写道 不支持ie8
我用IE8打开,没有问题,有阴影的。 |
|
返回顶楼 | |
发表时间:2010-03-12
< ![endif]--> IE8里面出现了这句话...
效果是没问题,但是有代码解析有问题 |
|
返回顶楼 | |
发表时间:2010-03-12
最后修改:2010-03-12
不错!IE6、8和chrome下测试了没问题,其他的没试(机器上没装)。
|
|
返回顶楼 | |
发表时间:2010-03-13
最后修改:2010-03-13
happysoul 写道 < ![endif]--> IE8里面出现了这句话...
效果是没问题,但是有代码解析有问题 多谢提醒,我已经修正了,现在ie下没有< ![endif]--> 了。 |
|
返回顶楼 | |
发表时间:2010-03-13
FF 3.0.18 也就是ubuntu上的FF 没有效果~
|
|
返回顶楼 | |
发表时间:2010-03-14
ie < 7 用 filter
其他 css text-shadow |
|
返回顶楼 | |
发表时间:2010-03-14
看上去很不错,但是现在还用不着,放着先。。。
|
|
返回顶楼 | |