如何让JavaFX CSS中的ladder与dropshadow配合生效？

你错误地将用于生成颜色/渐变的CSS ladder() 函数直接应用在了 -fx-effect 属性上。ladder() 属于paint类型函数，仅能用于接受颜色/渐变的属性（如 -fx-background-color），而 -fx-effect 需要的是Effect类型的值（如 dropshadow），因此你的代码无法被正确解析，导致阴影效果不生效。

方法一：使用主题伪类（推荐，JavaFX 11+） #

JavaFX 11及以上版本支持:bright和:dark伪类，会根据系统主题自动为控件绑定对应伪类。你可以直接为不同主题配置独立的阴影效果：

修改test.css为：

.test {
    -fx-text-fill: red;
}

/* 亮色主题下的阴影 */
.test:bright {
    -fx-effect: dropshadow(three-pass-box, yellow, 8px, 0.6, 0, 2);
}

/* 暗色主题下的阴影 */
.test:dark {
    -fx-effect: dropshadow(three-pass-box, cyan, 6px, 0.3, 0, 2);
}

如果需要手动切换主题，可在Java代码中添加如下逻辑：

// 切换到暗色主题
scene.setUserAgentStylesheet(Application.STYLESHEET_MODENA_DARK);
// 切换到亮色主题
scene.setUserAgentStylesheet(Application.STYLESHEET_MODENA);

方法二：仅阴影颜色随主题变化时使用ladder（不适用你的参数差异场景） #

如果仅需调整阴影颜色、保持阴影大小/透明度等参数一致，可以用ladder()生成条件颜色传入dropshadow：

.test {
    -fx-effect: dropshadow(three-pass-box, ladder(-fx-background-color, yellow 49%, cyan 50%), 8px, 0.6, 0, 2);
    -fx-text-fill: red;
}

但此方法无法实现不同的阴影尺寸和透明度，不满足你的需求。

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