盒子阴影和投影有什么区别？

box -shadow 和drop-shadow都是用于在元素后面创建阴影的 CSS 属性，但它们之间存在一些差异。

box-shadow在元素的整个盒子周围创建阴影，包括任何填充和边框。它有四个必需值：水平偏移、垂直偏移、模糊半径和扩散半径。它还允许您指定阴影的颜色。这是一个例子：

css 复制代码

box-shadow: 2px 2px 5px #888888;

drop-shadow在元素后面创建一个阴影，看起来将其从页面上抬起。它仅适用于元素的实际形状，忽略任何填充和边框。drop-shadow 有两个必需的值：水平偏移和垂直偏移，并允许您指定模糊半径、扩散半径和阴影的颜色。这是一个例子：

scss 复制代码

drop-shadow(2px 2px 5px #888888);

因此，总而言之，box-shadow 将阴影应用于元素的整个盒子，而 drop-shadow 仅将阴影应用于元素的形状。

更多的例子：

调试自己的阴影：

实现效果：