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

Question

我一直在整个互联网上搜索这个，但是对于我看到的大多数在 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 中的类文档。

投影

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

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 或 InnerShadow.radius 的文档，您会看到如下内容：

阴影模糊内核的半径。此属性控制阴影散布到源像素每一侧的距离。设置半径相当于将width 和height 属性都设置为(2 * radius + 1) 的值。

因此，如果设置radius 还设置了width 和height，则您不能通过CSS 为width 和height 提供不同的值。