javafx - 如何分离边框和效果？

Question

目前，我有一个带有以下 CSS 的按钮：

Button {
    -fx-text-fill: -fx-color-text;
    -fx-font: 15pt "Raleway SemiBold";

    -fx-background-color: -fx-color-theme;
    -fx-background-insets: 0, 0, 0, 0, 0, 1, 2;
    -fx-background-radius: 0;
    -fx-padding: 4px 20px;
    /* -fx-effect: innershadow(two-pass-box, white, 2, 0.2, 0, 0); */
    -fx-border-insets: 0;
    -fx-border-color: black;
}

它看起来像这样：

我正在尝试为按钮添加内部阴影。我希望边框显示在此按钮的外部，这应该会导致如下所示：

我在 Swing 中做到了。但是，当我尝试应用我的内部阴影时，它会在我的边框顶部绘制，如图所示：

我尝试将边框插入设置为 -1（因为没有用于效果的 insets 属性），但这只是移动了效果：

我的问题是：我能做些什么来确保我可以看到外面的边界，但保持我的效果在里面？

编辑：我很确定这是 OpenJFX 中的一个错误，我已经提交了一个错误报告。以下是一些可用于重现问题的快速代码：

public class App extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Region example = new Region();
        example.setMaxWidth(100);
        example.setMaxHeight(100);
        example.setEffect(new InnerShadow(BlurType.GAUSSIAN, Color.RED, 10, 0.04, 0, 0));
        example.setStyle("-fx-background-color: white; -fx-border-color: BLUE; -fx-border-width: 5px;");

        StackPane container = new StackPane();
        container.setStyle("-fx-background-color: black;");
        container.setAlignment(Pos.CENTER);
        container.getChildren().add(example);

        Scene scene = new Scene(container, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

}

Answer 1

我认为边框与应用的效果融合在一起。而且您很确定它可能是 JavaFX 渲染中的一个错误，下面是一种让它看起来像您想要的方式的方法。

您可以考虑以下解决方案，就像您认为“我绝对只想要这个外观！！ ”之类的事情:)

这个想法是，您手动绘制效果，而不是设置效果。

.button {
    -fx-text-fill: #FFFFFF;
    -fx-font: 15pt "Raleway SemiBold";
    -fx-background-color: #000000, #720D4D, #D03A9A, #DD70B6, #B01378, #CC2C93, #D03A9A, #C81688;
    -fx-background-insets: 0, 1, 1 2 2 1, 1 2 2 2, 2, 2 3 3 2, 2 3 3 3, 3;
    -fx-background-radius: 0;
    -fx-padding: 4px 20px;
    -fx-border-insets: 0px;
    -fx-border-radius: 0px;
    -fx-border-width: 0px;
}

输出如下[忽略字体，因为我没有 .tff ;)]：

并仔细查看验证目的：

这可能不是一个实际的解决方案，但可以是一个替代方案（最小的情况）。