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解释了一切好一点，但实质上是：

模糊类型 = [高斯|一次通过|三通箱|双通]]
颜色阴影颜色
number1 阴影模糊内核的半径。在[0.0 ... 127.0]范围内，典型值为10。
number2 影子的传播。扩展是半径的一部分，其中源材料的贡献将是100％。半径的剩余部分将具有由模糊内核控制的贡献。 0.0的扩展将导致完全由模糊算法确定的阴影的分布。 1.0的扩展将导致源材料外观的固体增长到半径的极限，在半径处具有非常尖锐的截止透明度。值应在[0.0 ... 1.0]范围内。
number3 x方向的阴影偏移，以像素为单位。
number4 y方向的阴影偏移，以像素为单位

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

JavaFX CSS不兼容

1 个答案: