box-shadow与drop-shadow的区别

box-shadow：

CSSbox-shadow属性，这通常用于阴影，但它遵循元素的矩形外边缘

filter：drop-shadow

过滤器不绑定到盒子模型。这意味着我们的图形的轮廓被识别，它周围的透明度被忽略，以便接收预期的形状阴影。

box-shadow和filter: drop-shadow()之间的区别实际上归结为 CSS 盒模型。一个看到它，另一个忽略它。两者在浏览器支持、性能等方面还有其他区别，但两者关键区别是对待盒子模型的方式。

半径的传播:drop-shadow()计算方式同box-shadow与text-shadow()计算方式不同;这意味着您可能指定的box-shadow传播半径与drop-shadow 的默认传播值不是一一对应的，因此在某些情况下，两者不是彼此相等的替换。

filter: drop-shadow()更易于使用，但限制更多。例如，我认为无法使用该drop-shadow()函数添加插入阴影。

它们都具有出色的浏览器支持，并且在所有现代浏览器上都表现良好。

如下效果：

html：

 <div class="wrapper">
        <div>
            <h2>Box-shadow</h2>
            <img class="box-shadow" src="https://assets.codepen.io/85648/cat-logo.svg" alt="cat logo" />
        </div>
        <div>
            <h2>Drop-shadow</h2>
            <img class="drop-shadow" src="https://assets.codepen.io/85648/cat-logo.svg" alt="cat logo" />
        </div>
    </div>

css：

 img {
            display: block;
            width: 20rem;
            max-width: 100%;
            margin: 2rem;
        }

        h2 {
            text-align: center;
        }

        .wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .box-shadow {
            box-shadow: 0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5);
        }

        .drop-shadow {
            filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
        }