JavaFX Корневая граница, аналогичная границе меню

Question

Продолжая разработку моего графического интерфейса, я столкнулся с другой проблемой. Я установил линейный градиент как границу для моего .root в файле CSS, но кажется, что элементы класса 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"); 

Затем вы можете удалить атрибут -fx-border-color из класс root.

Таким образом вы можете запретить любому другому элементу управления наследовать границу.