box-shadow vs filter: drop-shadow 2
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
none <div></div><br/><br/><br/>
box-shadow <div class="box-shadow"></div><br/><br/><br/>
filter: drop-shadow <div class="filter-drop-shadow"></div>
/**
* box-shadow vs filter: drop-shadow 2
*/
body {
background: #ddd;
font: 16px/1 sans-serif;
margin: 50px;
text-align: right;
}
div {
display: inline-block;
margin: 0 50px -2px 10px;
height: 17px;
width: 22px;
background: url(http://f.cl.ly/items/0l0T1Q453z2o2t3n0m24/envelope.png);
}
.box-shadow {
box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}