5

我一直在整个互联网上搜索这个，但是对于我看到的大多数在 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 个参数实现这种效果？

4

1 回答 1

7

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 方向上的阴影偏移量，以像素为单位。

内心的阴影

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.

From that, it appears you can't specify all 9 properties from CSS. In particular, you can't set the width, height, or input from CSS. But if you look at the documentation of DropShadow.radius or InnerShadow.radius you'll see something like:

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).

So if looks like setting the radius also sets the width and height, you just can't give different values for the width and height via CSS.

于 2019-02-23T18:51:00.727 回答