JavaFX CSS：更改TabPane Tab標頭形狀

Question

我試圖更改css的Tab標題形狀，但是當我在這里查看JavaFX的css參考時，找不到通過css的Tab的可訪問屬性。 我想使用梯形而不是矩形。 任何想法如何完成此任務？

Answer 1

您可以在任何情況下檢查默認的modena.css ：

Tab具有CSS類： .tab-pane > .tab-header-area > .headers-region > .tab

因此，例如，將以下內容添加到您的CSS文件中：

.tab-pane > .tab-header-area > .headers-region > .tab {
    -fx-background-radius: 20;
}

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

將導致以下結果：

對於梯形，您需要使用-fx-shape屬性：

.tab-pane > .tab-header-area > .headers-region > .tab {
      -fx-shape: "M300,290 L310,168 L410,168 L421,290 L300,290 z";
}

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
    -fx-shape: "M300,290 L310,168 L410,168 L421,290 L300,290 z";
}   

這將導致：