上篇文章向大家展示了一下如何使用css3实现文字的阴影效果，本文将继续向大家展示如何实现图片的阴影效果，其中包含了两种特殊效果：曲面/椭圆投影效果和悬浮投影效果。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
使用css3实现图片的阴影效果的原理
一个图形需要带有一个主投影，另一个带有弧度的图形也有自己的阴影效果，让这两个图形发生重叠，让他们的颜色一致然后可以把弧度阴影露出来，这样看到的就是一个曲线阴影的效果。
text-shadow属性设置
-
水平偏移量，正值向右，负值向左。
立即学习“前端免费学习笔记（深入）”；
垂直偏移量，正值向下，负值向上。
模糊度，不能为负值。
阴影的颜色。
使用css3实现曲面/椭圆投影效果
曲面/椭圆投影效果 椭圆投影1
椭圆投影2
实现效果如图所示
使用css3实现悬浮投影效果
悬浮投影 悬浮投影
实现效果如图所示
总结
直接使用box-shadow:5px 5px 10px black inset;属性设置样式样式就可以了。前两个值（5px 5px）是水平和垂直方向的偏移量，正值阴影就会向左向下偏移，负值反之；第三个值（10px）是设置模糊距离；black就是阴影的颜色啦；最后一个inset是在元素内部创建一个阴影，也就是内阴影了；删除掉inset就是设置外阴影了。
这是使用纯CSS实现的效果，在DIV层的区域边框添加阴影效果，看上去非常形象，但是实现起来并不是太难，CSS代码比较简洁，值得我们学习。
相关内容链接请查看本站内css3部分的视频教程：
