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 影子的扩散。散布是源 Material 的贡献为 100% 的半径部分。半径的剩余部分将有一个由模糊内核控制的贡献。 0.0 的散布将导致完全由模糊算法确定的阴影分布。 1.0 的散布将导致源 Material 不透明度向外固体增长到半径的极限，并在半径处非常锐利地截止透明度。值应在 [0.0 ... 1.0] 范围内。
• number3 x 方向的阴影偏移量，以像素为单位。
• number4 y方向的阴影偏移量，以像素为单位

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