JavaFX Root 边框与菜单边框相同

Question

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

正如你所看到的，在 window 的底部是我告诉你的效果。看左边的菜单，效果也被应用到它上面，这是我不希望发生的事情。这是我的 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

问题出在样式 class root:

The .root style class is applied to the root node of the Scene instance. Because all nodes in the scene graph are a descendant of the root node, styles in the .root style class can be applied to any node.

因此，如果您在此 class 中定义边框颜色，它将被任何 Node.

继承

您可以使用不同的名称创建一个新的 CSS class

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

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

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

然后您可以从 root class.

中删除 -fx-border-color 属性

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

JavaFX Root 边框与菜单边框相同

JavaFX Root border same as menu border

css

java

javafx

selector