box-shadow vs filter: drop-shadow

利用CSS 伪元素：after给方框添加小箭头图标，并且比较box-shadow与filter: drop-shadow实现阴影效果的差异，html代码如下

<div class="box-shadow">
	box-shadow
​</div>
<div class="filter-drop-shadow">
	filter: drop-shadow
</div>   

CSS代码如下：

/**
 * box-shadow vs filter: drop-shadow
 */

body {
	background: #ddd;
	font: 16px/1 sans-serif;
	}
div {
	margin: 100px;
	width: 200px;
	background: #fff;
	padding: 20px;
	position: relative;
	}
	div:after {
		content: "";
		position: absolute;
		top: 50%;
		left: -10px;
		margin: -10px 0 0;
		border-right: 10px solid #fff;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		}
	.box-shadow {
		box-shadow: 0 1px 5px rgba(0,0,0,.5);
		}
	.filter-drop-shadow {
		-webkit-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
		-moz-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
		-ms-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
		-o-filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
		filter: drop-shadow(0 1px 5px rgba(0,0,0,.5));
		}
	    
                    
​

效果截图如下：