📦 CSS盒阴影生成器

关于CSS盒阴影生成器

box-shadow CSS属性为元素框架周围添加阴影效果。可以设置多个效果（用逗号分隔），每个由2-4个长度值（水平偏移、垂直偏移、模糊半径、扩散半径）、可选颜色和可选的inset关键字定义。本生成器让你通过实时控件打造完美阴影并即时复制结果。

可控属性

• 水平偏移 —— 正值将阴影向右移动，负值向左。
• 垂直偏移 —— 正值将阴影向下移动，负值向上。
• 模糊半径 —— 值越大，模糊越大越柔和。
• 扩散半径 —— 正值扩大阴影，负值缩小阴影。
• 颜色与不透明度 —— 选择任意颜色并调整其透明度。
• 内阴影 —— 将阴影渲染到元素内部而非外部。

如何使用

1. 拖动偏移滑块来定位阴影。
2. 调整模糊和扩散来控制柔和度与大小。
3. 选择颜色并调整不透明度。
4. 如需内阴影则勾选inset。
5. 点击复制CSS并粘贴到样式表中。

常见问题

可以叠加多层阴影吗？ 生成器为清晰起见只输出单层阴影，但你可以将多次复制的值用逗号分隔粘贴以实现堆叠效果。

为什么我的阴影看不见？ 0%不透明度或0模糊/扩散加上与元素相同颜色可能渲染不可见。提高不透明度或模糊以让阴影可见。

在旧浏览器中能工作吗？ box-shadow 在所有现代浏览器中均受支持。非常旧的浏览器可能需要 -webkit- 前缀，可手动添加。