纯Css实现图片阴影代码非常逼真的效果

发布时间：2018-09-21 07:51:33 所属栏目：Asp教程来源：站长网

导读：这是纯CSS实现的逼真图片阴影效果，如果觉得不满意，自己再修改下效果，代码比较简单，主要是使用了Filter滤镜，其中的参数都可以修改的。你可以试着修改各个值，看有什么效果。演示： htmlheadtitleCSS实现逼真图片阴影效果/titlestyle.shadow {-moz-box

　　这是纯CSS实现的逼真图片阴影效果，如果觉得不满意，自己再修改下效果，代码比较简单，主要是使用了Filter滤镜，其中的参数都可以修改的。你可以试着修改各个值，看有什么效果。

　　演示：

<html> <head> <title>CSS实现逼真图片阴影效果</title> <style> .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000)"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); } </style> </head> <body> <img class="shadow" src="/uploads/common/images/p1.jpg" /> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：开发网_郴州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

纯Css实现图片阴影代码 非常逼真的效果

纯Css实现图片阴影代码非常逼真的效果