JavaFX CSSには、ボーダーエッジを越える背景色を止める方法がありますか？

Question

私はブートストラップCSSのようなカードを作成しようとしていますが、JavaFXコンポーネントを使用しています。私は丸いボーダーが欲しいが、トップ部分の背景色（見出し）が問題を与えている。

背景が境界をはみ出し、かなり醜いです。私はちょっとグーグルで、オーバーフロー：背景色に隠れていると解決するはずです。しかし、JavaFXのCSSはそれを持っていないようです。これを解決する別の方法がありますか？

私のソリューションは、これまで：JavaFX CSS Reference Guideで説明したように

Answer 1

、オーバーフローはサポートされていません。

JavaFXのCSSは、フロート、位置、オーバーフロー、及び幅としてCSSレイアウトプロパティをサポートしていません。ただし、CSS 埋め込みおよびのマージンプロパティは、一部のJavaFXシーングラフオブジェクトでサポートされています。レイアウトの他のすべての側面は、JavaFXコードでプログラム的に処理されます。さらに、表のようなHTML固有の要素に対するCSSのサポートは、JavaFXには同等の構成がないためサポートされていません。

ただし、丸められた背景の問題を解決するには-fx-background-radiusと-fx-border-radiusを使用できます。それらは同じ値でなければなりません。あなたはそれを見つけることができますhere in the reference guide。

---

ここに、あなたが作成しようとしていると思うブートストラップ様のカードの例があります。あなたは（私の知る限り推測できるように）やりたい方法はCSSから行うことができないクリッププロパティを指定することです-fx-background-radius: 10 10 0 0;

public class Card extends StackPane { 
    public BorderPane border = new BorderPane(); 
    public StackPane header = new StackPane(), content = new StackPane(); 
    public Card() { 
     setAlignment(Pos.CENTER); 
     getChildren().add(border); 
     border.setTop(header); 
     border.setCenter(content); 
     border.setStyle("-fx-border-color: cornflowerblue; -fx-border-radius: 10; "); 
     header.setStyle("-fx-background-color: derive(cornflowerblue, 70%); -fx-background-radius: 10 10 0 0; "); 
     header.setMinWidth(100); 
     header.setMinHeight(80); 
     content.setMinWidth(100); 
     content.setMinHeight(100); 
    } 

    public BorderPane getCard() { 
     return border; 
    } 

    public StackPane getHeader() { 
     return header; 
    } 

    public StackPane getContent() { 
     return content; 
    } 
} 

public void start(Stage stage) throws Exception { 
    Card card = new Card(); 
    card.setPadding(new Insets(10,10,10,10)); 

    GridPane grid = new GridPane(); 
    grid.setVgap(10); grid.setHgap(10); 
    grid.setAlignment(Pos.CENTER); 
    grid.addRow(0, new Label("Username"), new TextField()); 
    grid.addRow(1, new Label("Password"), new PasswordField()); 
    grid.addRow(2, new Button("Submit")); 
    card.getContent().getChildren().add(grid); 

    Label title = new Label("Card Example"); 
    title.setFont(Font.font("Tahoma", FontWeight.SEMI_BOLD, 36)); 
    card.getHeader().getChildren().add(title); 

    StackPane stack = new StackPane(); 
    stack.setAlignment(Pos.CENTER); 
    stack.getChildren().add(card); 

    Scene scene = new Scene(stack, 500, 300); 
    stage.setTitle("Boostrap-like Card Example"); 
    stage.setScene(scene); 
    stage.show(); 
}