使用css文件的JavaFX TitledPane双边框

在JavaFX中，TitledPane 是一个可以展开和折叠的面板，通常用于显示额外的内容。默认情况下，TitledPane 可能会有一个边框，但如果你想实现双边框的效果，可以通过CSS来自定义其样式。

基础概念

CSS (Cascading Style Sheets) 是一种样式表语言，用于描述HTML或XML（包括SVG和XHTML等各种XML方言）文档的外观和格式。在JavaFX中，可以使用CSS来自定义控件的外观。

JavaFX 是一个用于构建富客户端应用程序的Java库。它提供了丰富的UI控件和布局管理器。

类型与应用场景

双边框效果 可以用于突出显示某个区域或增加视觉效果。常见的应用场景包括：

表单验证错误提示框。
重要的操作按钮或面板。
需要用户特别注意的区域。

实现方法

以下是一个简单的示例，展示如何使用CSS为JavaFX的TitledPane添加双边框效果。

步骤1：创建JavaFX应用程序

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TitledPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TitledPaneExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        TitledPane titledPane = new TitledPane("Click me to expand/collapse");
        titledPane.setContent(new StackPane());

        StackPane root = new StackPane();
        root.getChildren().add(titledPane);

        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());

        primaryStage.setTitle("TitledPane with Double Border Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

步骤2：创建CSS文件（styles.css）

.titled-pane > .title {
    -fx-background-color: #f0f0f0;
    -fx-border-color: #ccc;
    -fx-border-width: 1px;
    -fx-padding: 5px;
}

.titled-pane > .content {
    -fx-background-color: #fff;
    -fx-border-color: #ccc;
    -fx-border-width: 1px;
    -fx-padding: 10px;
}

/* Double border effect */
.titled-pane {
    -fx-border-color: #ccc;
    -fx-border-width: 1px;
}

.titled-pane > .title {
    -fx-border-color: #aaa;
    -fx-border-width: 1px;
}