圆形选项卡聚焦边框

Question

对于我的 JavaFX 应用程序，我已指定我的选项卡窗格的所有选项卡都应具有圆角。

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

现在，我还需要指定什么来指定当标签被聚焦时显示的蓝色边框也具有相同的半径？谢谢迈克尔

Answer 1

如果您查看 modena.css 文件，对于选定的选项卡伪类，边框半径有以下规则：

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

您只需将其添加到您的设置中即可。例如：

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

圆形选项卡聚焦边框

Rounded tabs focused border

tabs

javafx

focus

rounding