JavaFX Dropshadow CSS : What do the parameters mean? 如何在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 currently supports the DropShadow and InnerShadow effects from the JavaFX platform. See the class documentation in javafx.scene.effect for further details about the semantics of the various effect parameters.

Drop Shadow

A high-level effect that renders a shadow of the given content behind the content.

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

<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
<color> The shadow Color.
<number> The radius of the shadow blur kernel. In the range [0.0 ... 127.0], typical value 10.
<number> The spread of the shadow. The spread is the portion of the radius where the contribution of the source material will be 100%. The remaining portion of the radius will have a contribution controlled by the blur kernel. A spread of 0.0 will result in a distribution of the shadow determined entirely by the blur algorithm. A spread of 1.0 will result in a solid growth outward of the source material opacity to the limit of the radius with a very sharp cutoff to transparency at the radius. Values should be in the range [0.0 ... 1.0].
<number> The shadow offset in the x direction, in pixels.
<number> The shadow offset in the y direction, in pixels.

Inner Shadow

A high-level effect that renders a shadow inside the edges of the given content.

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

<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
<color> The shadow Color.
<number> The radius of the shadow blur kernel. In the range [0.0 ... 127.0], typical value 10.
<number> The choke of the shadow. The choke is the portion of the radius where the contribution of the source material will be 100%. The remaining portion of the radius will have a contribution controlled by the blur kernel. A choke of 0.0 will result in a distribution of the shadow determined entirely by the blur algorithm. A choke of 1.0 will result in a solid growth inward of the shadow from the edges to the limit of the radius with a very sharp cutoff to transparency inside the radius. Values should be in the range [0.0 ... 1.0].
<number> The shadow offset in the x direction, in pixels.
<number> The shadow offset in the y direction, in pixels.

由此看来，您似乎无法从 CSS 中指定所有 9 个属性。特别是，您不能设置 width , height , 或 input来自 CSS。但是，如果您查看 DropShadow.radius 的文档或 InnerShadow.radius 你会看到类似的东西:

The radius of the shadow blur kernel. This attribute controls the distance that the shadow is spread to each side of the source pixels. Setting the radius is equivalent to setting both the width and height attributes to a value of (2 * radius + 1).

所以如果看起来像设置 radius还设置了 width和 height ，您不能为 width 提供不同的值和 height通过 CSS。