JavaFx:选项卡圆角

Question

为了使我的标签角变圆,我使用以下代码:

.tab {
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
}

但是,我的行为很奇怪.创建新标签时,它会有一些额外的角落,当我更改焦点或创建新标签时,这些角落会消失.例如 - 我创建了第一个选项卡.

现在我创建第二个选项卡.第一个标签已经正常,但第二个标签有这个奇怪的角落.

我已经检查了centos和win7 - 行为是一样的.怎么解决？

编辑1
这是我的所有CSS文件.最终目标是使标题标题更大,圆角.

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
     -fx-border-insets: -7 -7 -9 -8, -5 -5 -9 -6;
}

.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 10 10 10 10, 10 10 10 10;
}

.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > 
.tab-label {
    -fx-alignment: CENTER;
    -fx-text-fill: -fx-text-base-color;
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-border-radius: 10 10 0 0;
    -fx-background-radius: 10 10 0 0;
}

编辑2
我在两台不同的PC上检查过:1(Ubuntu),2(Centoc 71和VM Win7).我试着用oracle jdk编译 - 结果是一样的.

Answer 1

这是一个已经报告的错误https://javafx-jira.kenai.com/browse/RT-40462

更新该错误已转移到 openjdk 错误跟踪系统：

https://bugs.openjdk.java.net/browse/JDK-8090243

你的一些代码是多余的。所以这应该有效。

.tab:selected .focus-indicator {
    -fx-border-radius: 10 10 0 0, 10 10 0 0;
    -fx-border-insets: -6 -9 -8 -8, -5 -8 -7 -7;
}
/*
.tab-pane > .tab-header-area > .headers-region > .tab:selected{
    -fx-border-insets: 0 1 1 0, 1 2 0 1, 2 3 0 2;
}
*/
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
    -fx-padding:0 10 0 0;
}

.tab-header-area .tab{
    -fx-padding:4 10 5 10;
    -fx-background-radius: 10 10 0 0;
}

这看起来像这样：

更新

但如果你真的只想让圆角有更大的半径，这就是你所要做的：

.tab-pane > .tab-header-area > .headers-region > .tab {
    /* if outer border should be 10 radius */
    -fx-background-radius: 10 10 0 0, 9 9 0 0, 8 8 0 0;
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-border-radius: 9 9 0 0, 8 8 0 0;
}

更新

这是我从你的代码中得到的。添加新创建的选项卡时出现奇怪的行为。所以我制作了一个 gif 来展示鼠标悬停是如何工作的。

更新