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

由 dawei 8 月 24, 2018 没有评论 #代码 #图片 #实现 #效果 #真的 #阴影 #非常

　　这是纯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> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

由 dawei

【声明】：天津站长网内容转载自互联网，其相关言论仅代表作者个人观点绝非权威，不代表本站立场。如您发现内容存在版权问题，请提交相关链接至邮箱：bqsm@foxmail.com，我们将及时予以处理。

建站

热点

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

由 dawei

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

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

由 dawei

相关文章

使用softaculous创建WordPress临时站点

怎样建网站更有利于网站推广和优化？

中企动力带你了解舌尖上的餐饮网站设计趋势

您错过了

AI在情感识别与计算领域的运用

AI在交通管理与规划领域的应用

AI在提升公共安全管理效率和效果方面的应用与成效分析

人工智能技术正在推动图书馆的管理和服务向更高水平发展

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