CSS 阴影生成器
免费在线 CSS box-shadow 生成器。可视化创建精美阴影，可调整偏移、模糊、扩展、颜色和内阴影。实时预览，即时复制代码。
什么是 CSS box-shadow？
CSS box-shadow 是一个 CSS 属性，用于在元素框架周围添加阴影效果。它允许你通过指定偏移、模糊半径、扩展半径和颜色值来创建投影、内阴影和多层阴影。
box-shadow 有哪些参数？
box-shadow 属性接受多个值：水平偏移（X）、垂直偏移（Y）、模糊半径、扩展半径、颜色以及可选的 inset 关键字。你还可以用逗号分隔指定多个阴影。
inset 关键字是什么？
inset 关键字将阴影从外部阴影（投影）变为内部阴影。当指定 inset 时，阴影会绘制在元素边框内部而不是外部，产生内嵌效果。
什么是模糊半径？
模糊半径决定阴影边缘的模糊程度。值为 0 时创建清晰、坚实的边缘。较大的值会创建更扩散、更柔和的阴影，从元素延伸得更远。
什么是扩展半径？
扩展半径扩大或缩小阴影尺寸。正值使阴影比元素更大，负值使阴影更小。这会影响应用模糊之前的阴影大小。
如何创建多重阴影？
你可以通过用逗号分隔每个阴影定义来创建多重阴影。每个阴影可以有不同的偏移、模糊、扩展和颜色值。阴影按声明顺序应用，第一个阴影在最上层。
可以使用 RGBA 颜色吗？
可以，你可以使用任何 CSS 颜色格式，包括 RGBA、HSLA、HEX 或命名颜色。RGBA 和 HSLA 特别适合创建与背景自然融合的半透明阴影。
如何复制生成的 CSS 代码？
只需点击生成器界面中的"复制代码"按钮。CSS 代码将被复制到剪贴板，可以直接粘贴到样式表或 HTML 文件中。
box-shadow 在所有浏览器中都支持吗？
是的，box-shadow 在所有现代浏览器中都受支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。自 2011 年以来它一直是 CSS3 的一部分，具有出色的浏览器兼容性。
box-shadow 会影响性能吗？
box-shadow 对现代浏览器的性能影响很小。但是，在许多元素上使用具有大模糊半径的多个复杂阴影可能会影响渲染性能，尤其是在移动设备上。
box-shadow 的常见用途有哪些？
常见用途包括创建卡片悬浮效果、为按钮添加深度、创建内嵌表单字段、实现 Material Design 阴影效果，以及在重叠元素之间添加视觉分隔。
可以动画化 box-shadow 吗？
可以，box-shadow 可以使用 CSS 过渡或动画进行动画化。但是，动画化 box-shadow 可能会消耗较多性能。为了获得更好的性能，考虑使用伪元素配合不透明度过渡。