如何在JavaFX中设置Separator（分隔符）的样式？

问题说明 #

• 水平/垂直Separator默认显示3px宽的多层线条（水平为灰、白、黑三线，垂直为灰、白、灰三线），设置-fx-fill、-fx-border-color: null无效果
• 垂直Separator未居中显示
• 自定义样式后仍存在阴影间隙

核心原因 #

JavaFX的Separator默认通过line子结构+内外边框/背景实现立体效果，直接修改根节点样式无法覆盖子元素的默认配置。

解决方案 #

1. 实现单线条样式 #

直接定位Separator的line子节点，重置所有默认样式，只保留单条1px线条：

水平Separator代码（内联样式）

Separator horizontalSep = new Separator(Orientation.HORIZONTAL);
horizontalSep.setStyle("-fx-background-color: transparent; -fx-padding: 0;");
// 需在节点加入Scene后调用lookup，可通过Platform.runLater延迟执行
Platform.runLater(() -> {
    horizontalSep.lookup(".line").setStyle("-fx-background-color: white; -fx-pref-height: 1px;");
});

垂直Separator代码（内联样式）

Separator verticalSep = new Separator(Orientation.VERTICAL);
verticalSep.setStyle("-fx-background-color: transparent; -fx-padding: 0;");
Platform.runLater(() -> {
    verticalSep.lookup(".line").setStyle("-fx-background-color: white; -fx-pref-width: 1px;");
});

2. 外部CSS写法（更推荐，避免lookup时机问题） #

创建styles.css文件，内容如下：

.separator {
    -fx-background-color: transparent;
    -fx-padding: 0;
}

.separator .line {
    -fx-background-color: white;
}

.separator:horizontal .line {
    -fx-pref-height: 1px;
}

.separator:vertical .line {
    -fx-pref-width: 1px;
}

在代码中引入CSS：

scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

3. 垂直Separator居中修复 #

你的根容器是StackPane，默认会将所有子节点居中。通过上述样式重置-fx-padding为0，并精确设置line的尺寸，即可消除视觉偏移。确保Separator未被其他布局约束强制拉伸。

完整修改示例 #

在start方法中调整Separator创建逻辑：

@Override
public void start(Stage stage) throws FileNotFoundException {
    StackPane root = new StackPane();
    root.setBackground(new Background(new BackgroundFill(Color.BLACK, CornerRadii.EMPTY, Insets.EMPTY)));

    Scene scene = new Scene(root, 400, 400);
    // 引入外部样式文件
    scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

    Group content = new Group();
    Separator horizontalSep = new Separator(Orientation.HORIZONTAL);
    Separator verticalSep = new Separator(Orientation.VERTICAL);

    root.getChildren().addAll(content, horizontalSep, verticalSep);

    // 其他原有代码...
}

内容的提问来源于stack exchange，提问作者Dimnik