java - 选项卡之间的间距

Question

有没有办法在选项卡之间添加间距？ 这是一张图片:

我想在“演示”选项卡和“测试游戏”之间添加一个空格，有什么帮助吗？ 这是我正在使用的 CSS:

* {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;

    -fx-background-radius: 0;
    -fx-background-insets: 0;

    -fx-border-radius: 0;
    -fx-border-insets: 0;
}

/* tabs */

.tab {
    -fx-background-color: linear-gradient(#9b2626, #721b1b);
    -fx-border-color: #721b1b;
}

.tab-label {
    -fx-text-fill: white;
}

.tab:hover {
    -fx-background-color: #9b2626;
}

.tab:pressed {
    -fx-background-color: #721b1b;
}

Answer 1

未经测试，但尝试使用嵌套背景而不是边框​​。这样您就可以在一侧延伸透明背景，从而创建空间的外观。

* {
    -fx-focus-color: transparent;
    -fx-faint-focus-color: transparent;

    -fx-background-radius: 0;
    -fx-background-insets: 0;

    -fx-border-radius: 0;
    -fx-border-insets: 0;
}

/* presentation tab */

.tab {
    -fx-background-color: transparent, tab-border-color , tab-color;
    tab-color: linear-gradient(light-tab-color, dark-tab-color) ;
    tab-border-color : dark-tab-color ;
    dark-tab-color: #721b1b ;
    light-tab-color: #9b2626 ;
    -fx-background-insets: 0, 0 5 0 0, 1 6 0 0 ;
    -fx-padding: 4 10 4 4 ;
}

.tab-label {
    -fx-text-fill: white;
}

.tab:hover {
    tab-color: light-tab-color ;
}

.tab:pressed {
    tab-color: dark-tab-color;
}