JavaFX根邊框與菜單邊框相同

繼續開發我的GUI，我遇到了另一個問題。我在CSS文件中爲我的.root設置了一個線性漸變，但似乎Menu類的元素以某種方式共享相同的屬性，因爲同樣的線性效果也適用於這些屬性。

正如你所看到的，窗口的底部是我告訴你的效果。看着左邊的菜單，效果也被應用到了它，這是我不希望發生的事情。這是我的css文件。根被標記爲.root，並且菜單被標記爲.context-menuJavaFX根邊框與菜單邊框相同

.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; 
}

來源

2016-09-23 Justplayit94

問題是從樣式類root來：

的.root樣式類被施加到的根節點場景實例。因爲場景圖中的所有節點都是根節點的後代，所以.root樣式類中的樣式可以應用於任何節點。

因此，如果您在此類中定義邊框顏色，它將被任何Node繼承。

您可以創建一個不同的名稱

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

一個新的CSS類，並設置佈局的根元素有這種風格類

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

然後你可以從刪除-fx-border-color屬性root類。

這樣可以防止任何其他控件繼承邊框。

來源

2016-09-23 13:11:01 DVarga

男人，你太棒了。非常感謝。 – Justplayit94

JavaFX根邊框與菜單邊框相同

回答

相關問題