关于CSS3 filter:drop-shadow滤镜与box-shadow和text-shadow的哄骗。
在网站制造中很罕见假想图中对投影的应用，营销型网站建设，加上一些轻微的投影，能够增长页面内容的一些条理感、图片的空间感、立体感，也能凸起页面内容的一些细节，视觉上也使人感觉更加实在。在项目制造中，我碰到了以下图的成效需要制造，盘算应用box-shadow、text-shadow和 filter:drop-shadow合营完成。文本的暗影用text-shadow制造，边框的投影用box-shadow制造，三角形的投影用filter:drop-shadow制造。下面大略总结一下关于box-shadow、text-shadow和 filter:drop-shadow的应用办法。

关于页面中的投影，大多是应用box-shadow制造出一些投影，比方内容边框的投影，不外有的中央应用box-shadow其实不克不及完全抵达想要的成效，那末就能够应用filter:drop-shadow，关于box-shadow和filter:drop-shadow的用法，以下：
box-shadow: 投影体例(inset是内暗影，outset是外暗影) X轴偏移量 Y轴偏移量 暗影恍惚半径 暗影色采;
filter:drop-shadow: X轴偏移量 Y轴偏移量 暗影恍惚半径 暗影色采;
关于文本的暗影则能够用text-shadow制造。用法以下：
text-shadow: X轴偏移量 Y轴偏移量 暗影恍惚半径 暗影色采;
关于三者的兼容性，box-shadow从IE9+浏览器就能够兼容了，filter:drop-shadow是要在IE13才能够兼容，而挪动端的要从Android4.4才能够兼容。如果不推敲兼容，就能够应用。text-shadow从IE10初步兼容。
filter:drop-shadow是有穿透的成效，任何不是通明的部份都能够加上投影，包孕在文本上也能够应用，甚至是半通明的图片也能够应用。
例以下图中的小图标，第一个小图标是有增加成效的png图片，第二个小图标是根据以下代码制造的投影。
，
虽然是png图可是投影是在整张图的边框，这个成效其实不雅观，第三个小图标是用以下代码制造的投影

，是根据图片非通明部份投影的，这个成效显明是更雅观的。