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 参考指南中的文档说明如下：

<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 个属性。特别是，你可以不设置width，height或input从CSS。但是，如果您查看DropShadow.radiusor的文档，InnerShadow.radius您会看到如下内容：

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

因此，如果看起来像设置 theradius也设置了widthand height，则不能通过 CSS为widthand提供不同的值height。