请解释 box-shadow 和 drop-shadow 的区别。

推荐答案

box-shadow 和 drop-shadow 都是 CSS 中用来添加阴影效果的属性，但它们作用的对象和阴影的生成方式有所不同。

• box-shadow: 为元素的整个盒子模型（包括内容、内边距、边框）添加阴影。阴影会围绕整个矩形盒子生成，不会考虑元素内容的形状或透明度。
• drop-shadow: 为元素的图像内容（包括透明区域）添加阴影。阴影会跟随图像内容的形状生成，透明区域不会产生阴影。

简单来说，box-shadow 是盒子阴影，而 drop-shadow 是内容阴影。

本题详细解读

box-shadow

box-shadow 属性用于为 HTML 元素的盒子模型添加一个或多个阴影。其语法如下：

box-shadow: h-offset v-offset blur spread color inset;

• h-offset: 水平偏移量，正值表示阴影在右侧，负值表示在左侧。
• v-offset: 垂直偏移量，正值表示阴影在下方，负值表示在上方。
• blur: 模糊半径，值越大，阴影越模糊。
• spread: 阴影的扩展半径，正值表示阴影扩大，负值表示阴影缩小。
• color: 阴影的颜色。
• inset: 可选值，表示阴影在盒子内部，而不是外部。

特点:

• 阴影总是矩形，并且跟随元素的盒子模型。
• 即使元素的内容是不规则形状或有透明区域，阴影仍然是矩形的。
• 不关心元素内容的透明度。

使用场景:

• 为按钮、卡片等矩形元素添加阴影。
• 创建立体感。
• 模拟元素悬浮的效果。

drop-shadow

drop-shadow 属性用于为元素的图像内容添加阴影。它是一个 CSS filter 属性。其语法如下：

filter: drop-shadow(h-offset v-offset blur color);

• h-offset: 水平偏移量，正值表示阴影在右侧，负值表示在左侧。
• v-offset: 垂直偏移量，正值表示阴影在下方，负值表示在上方。
• blur: 模糊半径，值越大，阴影越模糊。
• color: 阴影的颜色。

特点:

• 阴影跟随图像内容的形状，包括透明区域。
• 阴影会忽略元素盒子模型的边距和边框。
• 更适用于具有复杂形状或透明区域的元素，例如图片、图标、文字等。

使用场景:

• 为透明背景的 PNG 图片添加阴影，保持图像形状。
• 为 SVG 图标添加阴影。
• 创建具有自然轮廓的阴影效果。

总结