JavaFx-增加文本和选项卡标题区域边缘之间的空间

我不明白我应该做什么来完成这项任务。我试过了

.tab-header-area .tab{
    -fx-background-color:red;
    -fx-padding:30px;
}

编辑1 这就是我得到的

但我有相同的标签标题在大红色矩形内。如何增加文本和选项卡标题区域边缘之间的距离？换句话说，我如何才能使标签标题更大的字体大小相同

编辑2 当我这样做的时候

.tab-header-area .tab .label{
    -fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
    -fx-background-color: red ;
}

我得到：

但我需要抱歉，这是gimp，不是photoshop

---

如果您希望标签周围有边框，而不是标签，则必须使用：

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color: red;
    -fx-padding: 20px;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

如果要操纵标签所在的选项卡容器，则需要：

.tab-pane > .tab-header-area > .headers-region > .tab  > .tab-container{    
    -fx-border-color: black;
    -fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-padding: 20px;
    -fx-background-color: red;
}

更新

所选选项卡的默认设置为：

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}

事情就是这样的：

查看modena.css默认JavaFX样式表文件，了解需要更改的内容

字体大小不会动态更改，您必须在与字体大小相关的选项卡的size/width/height属性上使用侦听器来处理字体大小

还有很多伪标记，如.tab:selected.tab:top等。因此，如果您只想在新设计中使用默认行为，请注意这类事情

---

最后看一看css选择器，您错过了降序选择器“>”：

如果您希望在选项卡周围有边框，而不是标签，则必须使用以下选项：

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-color: red;
    -fx-padding: 20px;
    -fx-border-color: black;
    -fx-border-width: 1px;
}

如果要操纵标签所在的选项卡容器，则需要：

.tab-pane > .tab-header-area > .headers-region > .tab  > .tab-container{    
    -fx-border-color: black;
    -fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-padding: 20px;
    -fx-background-color: red;
}

更新

所选选项卡的默认设置为：

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-width: 1, 1;
    -fx-border-color: -fx-focus-color, -fx-faint-focus-color;
    -fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
    -fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}

事情就是这样的：

查看modena.css默认JavaFX样式表文件，了解需要更改的内容

字体大小不会动态更改，您必须在与字体大小相关的选项卡的size/width/height属性上使用侦听器来处理字体大小

还有很多伪标记，如.tab:selected.tab:top等。因此，如果您只想在新设计中使用默认行为，请注意这类事情

---

最后看一看css选择器，您错过了降序选择器“>”：

不太清楚您在寻找什么。。。也许吧

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class TabPaneStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        Tab tab1 = new Tab();
        tab1.setGraphic(new Label("tab 1"));
        Tab tab2 = new Tab();
        tab2.setGraphic(new Label("tab 2"));
        tabPane.getTabs().addAll(tab1, tab2);
        Scene scene = new Scene(tabPane);
        scene.getStylesheets().add("tab-pane-big-tabs.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

使用css文件

.tab-header-area .tab .label{
    -fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
    -fx-background-color: red ;
}

---

现在还不清楚你在找什么。。。也许吧

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;

public class TabPaneStyleTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        TabPane tabPane = new TabPane();
        Tab tab1 = new Tab();
        tab1.setGraphic(new Label("tab 1"));
        Tab tab2 = new Tab();
        tab2.setGraphic(new Label("tab 2"));
        tabPane.getTabs().addAll(tab1, tab2);
        Scene scene = new Scene(tabPane);
        scene.getStylesheets().add("tab-pane-big-tabs.css");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

使用css文件

.tab-header-area .tab .label{
    -fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
    -fx-background-color: red ;
}

---

---

你能发布一张它看起来像什么的图片吗？如果可能的话，你希望它看起来像什么？你能发布一张它看起来像什么的图片吗？如果可能的话，你希望它看起来像什么？但是当标签被聚焦时，我如何使边框不在中心而是在标签标题的边缘？我的意思是边框的行为方式相同，只适用于大标签头？我的意思是主体部分必须不在中间，但它的宽度必须在标签头的~宽。文本左侧，关闭按钮右侧。感谢您的帮助。见编辑2。对不起，我没有从一开始就画出来。重点是如何增加边框和文本之间的距离，而不是边框和制表符标题边缘之间的距离。但是当制表符处于焦点时，如何使边框不在中心而是在制表符标题边缘？我的意思是边框的行为方式相同，只适用于大标签头？我的意思是主体部分必须不在中间，但它的宽度必须在标签头的~宽。文本左侧，关闭按钮右侧。感谢您的帮助。见编辑2。对不起，我没有从一开始就画出来。重点是如何增加边框和文本之间的距离，而不是边框和选项卡标题边缘之间的距离。矩形不是自定义矩形，而是焦点矩形。我不理解您的代码。在这两种代码中都有一个黑色边框。不能有任何自定义边框。对不起，花费的时间比我想象的要长。谢谢！我们终于做到了！你能不能看一下这个矩形不是自定义矩形，它是焦点矩形。我不懂你的代码。在这两种代码中都有一个黑色边框。不能有任何自定义边框。对不起，花费的时间比我想象的要长。谢谢！我们终于做到了！你能看看这个吗