关于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图但是投□□□□影是在整□□□□张图的边◥框，这个效果□□并不美观，第三个小□□图标是用□□□□如下代码□□□制作的投●影
 
，是根据图片非透明部分投影的，这个效果明显是更美观的。