box-shadow vs filter: drop-shadow

dabblet.css

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

body {
	background: #aaa;
	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 0 1px rgba(0,0,0,.5);
		}
	.filter-drop-shadow {
		-webkit-filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
		-moz-filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
		-ms-filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
		-o-filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
		filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
		}
	    
                    
​

dabblet.html

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

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}