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 来展示鼠标悬停是如何工作的。

更新

Answer 2

所以让我们假设这是一个错误，并且你的 css 很好，我现在看到的唯一解决方案是在一些延迟后删除和添加默认样式。像这样的：

 Tab tab = new Tab("Tab " + (tabs.getTabs().size() + 1));
 tabs.getTabs().add(tab);
 new Thread(()-> {
     try {
         Thread.sleep(50);
     } catch (InterruptedException e) {
         e.printStackTrace();
     }
     Platform.runLater(()->{
           tabs.getStyleClass().remove("tab-pane");
           tabs.getStyleClass().add("tab-pane");
     });
 }).start();

说实话很讨厌，但它对我有用：

Answer 3

它是CornerRadii，它只是增加和减少