box-shadow和drop-shadow的区别

最大的区别是： drop-shadow才是真正意义上的投影，而box-shadow只是盒阴影而已，下面的例子展示了二者的不同之处

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.box {
		    margin: 40px; padding: 50px;
		    background-color: #fff;
		    position: relative;
		    font-size: 24px;
		}
		.cor {
		    position: absolute;
		    left: -40px;
		    widtd: 0; height: 0;
		    overflow: hidden;
		    border: 20px solid transparent;
		    border-right-color: #fff;
		}
		.box-shadow {
		    box-shadow: 5px 5px 10px black;
		}
		.drop-shadow {
		    filter: drop-shadow(5px 5px 10px black);
		}
	</style>
</head>
<body>

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

</body>
</html>