如何创建部分边框（带孔）？

Question

我在 JavaFX 中编写代码并使用 CSS 来设置上述问题的样式。以下代码为 2 像素宽的 AnchorPane 制作了边框：

    AnchorPane pane = new AnchorPane();
    pane.setStyle("-fx-border-color: blue; -fx-border-width: 2");

以上代码围绕三个边制作了边框：

    pane.setStyle("-fx-border-color: blue; -fx-border-width: 2 2 0 2;");

我想在所有 4 个边上都制作边框，但顶部边框必须有一个孔，如下图所示：

你能帮帮我吗？

Answer 1

使用"nested backgrounds"生成这样的边框：

    pane.setStyle("-fx-background-color: blue, -fx-background, -fx-background;"
            + "-fx-background-insets: 0 0 0 0, 0 50 2 100, 2 2 2 2;");

JavaFX CSS documentation 包含所有详细信息，但基本上它的工作方式是创建三个背景，一个放在另一个上面。第一个是蓝色的，每边都有 0 的插图。即：

pane.setStyle("-fx-background-color: blue; -fx-background-insets 0 0 0 0;");

这将创建一个填充整个窗格的蓝色矩形：

第二个背景具有来自摩德纳 (-fx-background) 的默认根背景。它在顶部有插图 0，在左边有 50，在底部有 2，在右边有 100。所以前两个嵌套背景：

pane.setStyle("-fx-background-color: blue, -fx-background;"
        + "-fx-background-insets: 0 0 0 0, 0 50 2 100;");

产生这个：

注意底部 2 像素宽的蓝线。

最后，第三个背景也有默认的背景颜色（-fx-background），每边插入两个像素。所以当它覆盖在前两个背景上时，可以看到预期的效果：

当所有四个边的值都相同时，您可以将四个值替换为一个值。所以CSS可以简写

    pane.setStyle("-fx-background-color: blue, -fx-background, -fx-background;"
            + "-fx-background-insets: 0 , 0 50 2 100, 2;");

只是一个技术说明：除非至少创建一个控件，否则不会加载默认样式 sheet，这就是我在下面的完整示例中添加 Label 的原因。

这是一个 SSCCE：

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

public class BorderWithGap extends Application {

    @Override
    public void start(Stage primaryStage) {
        AnchorPane pane = new AnchorPane();

        Label label = new Label("Border with gap");
        AnchorPane.setTopAnchor(label, 50.0);
        AnchorPane.setLeftAnchor(label, 50.0);
        pane.getChildren().add(label);

        pane.setStyle("-fx-background-color: blue, -fx-background, -fx-background;"
                + "-fx-background-insets: 0, 0 50 2 100, 2;");


        Scene scene = new Scene(pane, 600, 600);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

Answer 2

使用 :before 怎么样？

.testbox 是要添加边框的块元素。

.testbox{
    margin:10px;
    border:#000 solid 2px;
}

.testbox:before {
    background: #fff;
    width:300px;
    height: 2px;
    content: '';
    position: relative;
    display: block;
    top: 0;
    left: 300px;
    margin: -2px 0 0;
}

Answer 3

先生，您对此有严格要求CSS吗？ java 可以做到，使用 Shape 和 Borders

Nikitoslav.java

public class Nikitoslav extends Application {

@Override
public void start(Stage primaryStage) throws Exception {

    Pane g = new Pane();        
    g.setBackground(new Background(new BackgroundFill(Color.YELLOW,
            null, null)));
    g.relocate(20, 20);
    BorderStroke bs = new BorderStroke(Color.RED, Color.RED, Color.RED, Color.RED,//the paint around th four corners
            BorderStrokeStyle.SOLID, BorderStrokeStyle.SOLID, BorderStrokeStyle.SOLID, BorderStrokeStyle.SOLID,
            null, BorderStroke.THIN, null);
    g.setBorder(new Border(bs));
    Path p = new  Path();
    p.getElements().addAll(new MoveTo(1, 0),new HLineTo(0),new VLineTo(4), new HLineTo(4), new VLineTo(0),
            //creating a rectangle
            new HLineTo(3)
    );
    g.setShape(p);
    g.setPrefSize(300, 300);
    primaryStage.setScene(new Scene(new Group(g),500,500));
    primaryStage.show();
    g.setPrefSize(400, 400);
}


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

@Override
public void init() throws Exception {
    // TODO Auto-generated method stub
    super.init();
}

@Override
public void stop() throws Exception {
    // TODO Auto-generated method stub
    super.stop();
 }

}

有了这个，你不需要嵌套的 Backgrounds 或 Backgrounds 的数组-（猜测这会提高性能）

为了解释我的代码，好吧，我使用 BorderStroke 创建了我的 Borders，其中 Paint 分别填充了右上角-左下角，指定了颜色类型和样式，在我用 PathElements 创建了一个开放的矩形之后。从 x 轴开始，我从 1 然后到 0 画了一条垂直线到 4，矩形的长度并绘制底部宽度也 4 并从长度 4 到 0[=46 的垂直线绘制=] 然后从宽度 4 画到 3 并留下点 2 作为洞

希望对您有所帮助

如何创建部分边框（带孔）？

How to create a partial border(with a hole)?

css

javafx

border