JavaFX CSS 不兼容

Question

免责声明：我对 CSS 很陌生。

我正在尝试在使用 JavaFX 的 Java 应用程序中使用 css 绘制一个带有阴影的框。我使用JSFiddle 来验证 CSS 是否在做我想做的事情，一旦我把一切都做得很完美，我就把它插入到我正在用于我要绘制的对象的样式表中。

这是原始 CSS：

.tallBox {
    width: 30px;
    height: 90px;
    background-color: #00AA00;
    box-shadow: 1px 1px #008800,
                2px 2px #008800,
                3px 3px #008800,
                4px 4px #008800;
}

这是我在 JavaFX 中尝试使用的 CSS：

.tallBox {
    -fx-min-width: 30px;
    -fx-max-width: 30px;
    -fx-min-height: 90px;
    -fx-max-height: 90px;
    width: 30px;
    height: 90px;
    background-color: #00AA00;
    box-shadow: 1px 1px #008800,
                2px 2px #008800,
                3px 3px #008800,
                4px 4px #008800;
}

Java 抱怨 box-shadow 仅将 <size> 列表作为参数，因此我将其拆分为 box-shadow 和 box-shadow-color 如下：

.tallBox {
    -fx-min-width: 30px;
    -fx-max-width: 30px;
    -fx-min-height: 90px;
    -fx-max-height: 90px;
    width: 30px;
    height: 90px;
    background-color: #00AA00;
    box-shadow: 1px 1px,
                2px 2px,
                3px 3px,
                4px 4px;
    box-shadow-color: #008800;
}

这阻止了 java 抱怨，但没有显示任何内容，并且 JSFiddle 不接受新格式的 box-shadow 参数。

有人知道如何在 JavaFX 中正确执行此操作吗？

编辑：我基于this question and answer开发了我的CSS。

Answer 1

我想你需要的是-fx-effect: dropshadow(<blur-type>, <color>, <number1>, <number2>, <number3>, <number4>)，例如：

.tallBox {
<other properties>
-fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

这里的JavaFX CSS Reference Guide 解释了一切，但本质上更好：

• 模糊型 = [ 高斯 |一通箱|三通箱|两通盒]
• color阴影颜色
• number1 阴影模糊内核的半径。在 [0.0 ... 127.0] 范围内，典型值为 10。
• number2 阴影的传播。散布是源材料贡献为 100% 的半径部分。半径的剩余部分将具有由模糊内核控制的贡献。 0.0 的散布将导致阴影的分布完全由模糊算法确定。 1.0 的扩展将导致源材料不透明度向外稳定增长到半径的极限，并在半径处对透明度进行非常锐利的截止。值应在 [0.0 ... 1.0] 范围内。
• number3 x 方向的阴影偏移量，以像素为单位。
• number4 y方向的阴影偏移量，以像素为单位

有关教程类型的简短文章，请参阅here。