JavaFX Dropshadow CSS：参数是什么意思？如何在CSS中实现宽度和高度？

Question

我一直在Internet上进行搜索，但是对于我看过的大多数用CSS回答的问题，人们只是给出了代码而没有解释它们。

-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0.0, 0.0);

对于在CSS中实现投影的这一行代码，变量是什么意思？

根据我的推断，它的意思是：

-fx-effect: dropshadow(blurType, color, radius, spread, offsetX, offsetY)

但是在FXML中实际的DropShadow效果标签中，有6个数字变量而不是4。

<DropShadow blurType="GAUSSIAN" color="#ee8c9e8f" height="151.47" offsetX="3.0" offsetY="3.0" radius="73.75" spread="0.5" width="145.53" />

如何在CSS中使用8个参数实现这种效果？

Answer 1

这是JavaFX CSS Reference Guide中的文档所说的内容：

<effect>

JavaFX CSS当前支持JavaFX平台的DropShadow和InnerShadow效果。有关各种效果参数的语义的更多详细信息，请参见javafx.scene.effect中的类文档。

Drop Shadow

一种高级效果，将给定内容的阴影呈现在内容的后面。

dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

<blur-type> =[ gaussian | one-pass-box | three-pass-box | two-pass-box ]<color>阴影颜色。<number>阴影模糊内核的半径。在[0.0 ... 127.0]范围内，典型值为10。<number>阴影的扩散。扩展是半径的一部分，其中源材料的贡献将为100%。半径的其余部分将由模糊内核控制。 0.0的扩展将导致阴影的分布，该阴影完全由模糊算法确定。 1.0的扩散将导致源材料不透明性向外稳固增长到半径的极限，并且半径处的透明度非常陡峭地截止。值应在[0.0 ... 1.0]范围内。<number>x方向上的阴影偏移，以像素为单位。<number>y方向上的阴影偏移，以像素为单位。

内部阴影

在给定内容的边缘内渲染阴影的高级效果。

innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )

<blur-type> =[ gaussian | one-pass-box | three-pass-box | two-pass-box ]<color>阴影颜色。<number>阴影模糊内核的半径。在[0.0 ... 127.0]范围内，典型值为10。<number>阴影的阻塞。扼流圈是半径的一部分，其中原始材料的贡献为100%。半径的其余部分将由模糊内核控制。扼流圈0.0将导致阴影分布完全由模糊算法确定。扼流圈1.0将导致阴影从边缘到半径的内部向内稳定增长，并且半径内部的透明度非常陡峭。值应在[0.0 ... 1.0]范围内。<number>x方向上的阴影偏移，以像素为单位。<number>y方向上的阴影偏移，以像素为单位。

从那开始，您似乎无法从CSS中指定所有9个属性。特别是，不能从CSS设置width，height或input。但是，如果您查看DropShadow.radius或DropShadow.radius的文档，则会看到类似以下内容的内容：

阴影模糊内核的半径。此属性控制阴影散布到源像素每一侧的距离。设置半径等同于将InnerShadow.radius和InnerShadow.radius属性都设置为width的值。

因此，如果似乎设置height也会同时设置(2 * radius + 1)和radius，则无法通过CSS为width和height设置不同的值。