JavaFX中按钮与面板DropShadow效果表现不一致问题排查

这不是JavaFX的Bug，问题出在你使用的dropshadow CSS参数顺序错误且扩散值超出合法范围。

问题分析 #

JavaFX CSS中dropshadow的正确参数顺序（包含模糊类型时）为：

dropshadow(<blur-type>, <color>, <radius>, <offset-x>, <offset-y>, <spread>)

你当前的样式：

-fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 0px, 0px, 4px, 4px);

会被解析为：

• 模糊半径：0px（无模糊效果）
• X/Y偏移：0px/4px（阴影向下偏移4px）
• 扩散值：4px（严重超出0~1的合法范围，会导致阴影过度向内扩散）

面板能正常显示是因为其白色背景完全覆盖了向内扩散的阴影，仅露出外部部分；而按钮的皮肤背景未覆盖过度扩散的阴影区域，导致阴影覆盖按钮本身。

修复方案 #

方案1：修正参数顺序与合法值

调整为正确的参数顺序，设置合理的模糊半径和扩散值：

-fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 4px, 0px, 0px, 0.0);

参数说明：

• 4px：阴影模糊半径，控制阴影的柔和程度
• 0px, 0px：X/Y轴偏移量，设为0时阴影均匀分布在按钮四周
• 0.0：扩散值，0表示阴影仅在按钮边缘外扩散，不会向内覆盖

若需要轻微的阴影扩散效果，可将扩散值设为0.1~0.3之间的数值。

方案2：将阴影应用到容器节点

如果直接给按钮添加效果仍有异常，可将按钮包裹在StackPane或Pane中，给容器添加阴影样式，并设置足够内边距避免阴影覆盖按钮：

<!-- FXML示例 -->
<StackPane style="-fx-padding: 8px; -fx-effect: dropshadow(three-pass-box, rgba(16, 40, 123, 0.2), 4px, 0px, 0px, 0.0);">
    <Button text="测试按钮" style="-fx-background-color: white;"/>
</StackPane>

内容的提问来源于stack exchange，提问作者JeroenV