如何在javafx中完成边框长度？

Question

我正在使用CSS开发JavaFx应用程序。我希望盒子的线条能够填满所有空间。

我有以下CSS。

.box
{
    -fx-border-color:#000 #ff0000 #00ff00 #0000ff;
    -fx-border-width:5px;
}

这给出了结果：

我希望黑线覆盖顶部的所有部分。感谢。

Answer 1

您可以为边框使用“嵌套背景”技术：

.box {

    -fx-background-color: #000, #f00, #00f, #0f0, -fx-background ;
    -fx-background-insets: 0, 5 0 0 0, 5 5 0 0, 5 5 0 5, 5 ;
}

它的工作方式是它绘制五个背景，一个在另一个之上，每个背景都有不同的插图。首先，它绘制了整个窗格的黑色背景;然后它绘制一个红色背景填充整个窗格，除了顶部5个像素;然后是蓝色背景填充除了顶部和右边的五个像素之外的所有内容，等等。

经过一番思考，你可以很好地控制它。例如，将其更改为

.box {
    -fx-background-color: #000, #0f0, #f00, #00f, -fx-background ;
    -fx-background-insets: 0, 5 0 0 0, 5 0 5 0, 5 0 5 5, 5 ;
}

将让绿色边框沿着底部跨越整个宽度，而不是让蓝色和红色边框一直延伸到窗格的底部。

这是一个快速测试，上面的代码名为box-style.css：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class BorderTest extends Application {

    @Override
    public void start(Stage primaryStage) {

        // just create a control so the default stylesheet is loaded:
        new Label();

        Pane root = new Pane();
        root.getStyleClass().add("box");
        Scene scene = new Scene(root, 400, 400);
        scene.getStylesheets().add("box-style.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

使用CSS的第一个版本，这看起来像

Answer 2

有点丑陋的黑客，但你可以使用多个边框来简单地在旧边框上绘制顶部边框

.box
{
    -fx-border-color: #000 #ff0000 #00ff00 #0000ff, #000;
    -fx-border-width: 5px, 5px 0 0 0;
}