css 中box-shadow使用总结

还记得我之前还是 ie 时代的时候我们如果遇到有投影，阴影的设计稿，一般的做法就是使用图片作为背景实现，如果要是做自适应宽高还需要利用好几个元素拼接起来设置图片背景实现，而现在我们想要实现投影只需要一个 css 属性 box-shadow 就能轻松搞定，下面我们来详细介绍一下它的使用方法：

一、概述

box-shadow 是 CSS 中的一个属性，用于在元素框的外部添加阴影效果。通过调整阴影的偏移量、模糊度、扩展距离和颜色，可以创建出各种独特的视觉效果。

二、语法

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

h-offset (水平偏移量): 定义阴影的水平偏移距离。正值向右偏移，负值向左偏移。
v-offset (垂直偏移量): 定义阴影的垂直偏移距离。正值向下偏移，负值向上偏移。
blur (模糊半径): 定义阴影边缘的模糊程度。数值越大，阴影越模糊。
spread (扩张半径): 定义阴影的大小。正值扩大阴影尺寸，负值缩小阴影尺寸。
color 定义阴影的颜色。
inset 可选参数，如果指定了该参数，阴影将在元素内部。

三、示例

1. 简单的外部阴影

div {
  box-shadow: 5px 5px 3px 0px rgba(0, 0, 0, 0.5);
}

2. 带有模糊和扩展的阴影

div {
  box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, 0.3);
}

3. 内部阴影

div {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

4. 多个阴影

div {
  box-shadow: 
    3px 3px 5px 6px rgba(255, 0, 0, 0.5), 
    -3px -3px 5px 6px rgba(0, 0, 255, 0.5);
}

四、注意事项

• 阴影不会影响元素的布局或大小。
• 阴影的渲染顺序与在 box-shadow 属性中定义的顺序相同。
• 阴影可以与边框半径 (border-radius) 和其他边框样式一起使用。
• 阴影的颜色可以是任何有效的 CSS 颜色值。

五、兼容性

box-shadow 在现代浏览器中都有很好的支持，包括 Chrome、Firefox、Safari 和 Edge。但在一些较旧的浏览器版本中，可能需要使用供应商前缀（如 -webkit-、-moz- 等）来确保兼容性。

六、进阶用法

1. 动画阴影

可以使用 CSS 动画或过渡来动态改变阴影的效果，如改变阴影的颜色、偏移量等。

2. 与边框结合使用

通过将阴影与边框结合使用，可以创建出更丰富的视觉效果，如立体边框效果。

3. 文本阴影

除了用于元素框外，box-shadow 的类似属性 text-shadow 还可以用于为文本添加阴影效果。

七、总结

box-shadow 是一个功能强大的 CSS 属性，通过调整其各个参数，可以轻松创建出各种独特的阴影效果。在网页设计中灵活运用阴影效果，可以使页面更加生动、立体和吸引人。
**性能考量：**复杂的阴影效果，尤其是高模糊度，可能影响页面渲染性能，特别是对于动画或在性能较低的设备上。适度使用以保持性能。
**兼容性：**虽然大多数现代浏览器都支持box-shadow，但针对老旧浏览器（如IE8及更早版本），可能需要考虑使用滤镜等替代方案或渐进增强策略。
**调试与优化：**利用开发者工具的盒模型视图，可以直观地调整阴影参数，找到最佳视觉效果

最后附上投影实例：https://jsrun.net/3R5Kp/