JavaFX 根边框与菜单边框相同

Question

继续开发我的 GUI，我遇到了另一个问题。我在 CSS 文件中为我的.root 设置了一个线性渐变作为边框，但似乎Menu 类的元素以某种方式共享相同的属性，因为同样的线性效果也应用于这些。

如您所见，窗口底部是我告诉您的效果。看左边的菜单，效果也被应用了，这是我不希望发生的事情。 这是我的css文件。根标记为.root，该菜单标记为.context-menu

.root{//here
-fx-background-color: #2D2E32;
-fx-font-size: 12px;
-fx-background-insets: 0 0 0 0, 0, 4, 4;
-fx-border-color: linear-gradient(transparent, #32739B);
}

#file{
    -fx-background-color: linear-gradient(#494C58, #3E3F43);


}

#file .label{
    -fx-text-fill: #EAEAEA;

}

.context-menu{//and here
    -fx-background-color: #3E3F43;
}

#closeButton, #minimizeButton, #maximizeButton{
    -fx-background-radius: 0;
    -fx-background-color: linear-gradient(#494C58, #3E3F43);
    -fx-text-fill: #ffffff;
    -fx-font-weight: bold;
    -fx-background-insets: 0 0 0 0, 0, 1, 2;
}

#closeButton:hover{
    -fx-background-color: #E46458;
}

#minimizeButton:hover{
    -fx-background-color: #80B1E0;
}

#maximizeButton:hover{
    -fx-background-color: #80E089;
}

.menu-item:hover, menu-item:focus{
    -fx-background-color: #69757A;
}

.menu{

}

.menu:hover{
    -fx-background-color: #69757A;
}

.label{
    -fx-text-fill: #ffffff;
}

.button{
    -fx-background-radius: 0;
}

#submit{
    -fx-background-color: #3F494D;
    -fx-background-insets: 0 0 0 0, 0, 4, 4;
    -fx-text-fill: #fff;
    -fx-font-weight: bold;
    -fx-border-color: #32739B;
}

#submit:hover{
    -fx-background-color: #32739B;

}

.text-field{
    -fx-background-radius: 0;
}

#forgot{
    -fx-background-color: transparent;
    -fx-text-fill: #818181;
}

.separator{
    -fx-background-color: #363636;
    -fx-background-insets: 0,1,2,0;
}

Answer 1

问题出在样式类root：

.root 样式类应用于场景的根节点 实例。因为场景图中的所有节点都是 根节点，.root 样式类中的样式可以应用于任何节点。

因此如果你在这个类中定义了边框颜色，它将被任何Node继承。

你可以用不同的名字创建一个新的 CSS 类

.rootelement {
    -fx-border-color: linear-gradient(transparent, #32739B);
    -fx-border-width: 2;
}

并将布局的根元素设置为具有此样式类

BorderPane layout = new BorderPane();
layout.setTop(hBox);
layout.getStyleClass().add("rootelement");

然后您可以从root 类中删除-fx-border-color 属性。

这样可以防止任何其他控件继承边框。