JavaFX css 有办法阻止背景颜色越过边框吗？

Question

我正在尝试制作一张类似于 bootstrap CSS 的卡片，但使用的是 JavaFX 组件。我想要一个圆角边框，但顶部的背景颜色 (header) 给我带来了问题。

背景溢出边框，很难看。我用谷歌搜索了一下，发现背景颜色上的 overflow:hidden 应该可以解决它。 JavaFX css 似乎没有。还有其他解决方法吗？

目前我的解决方案：

Answer 1

JavaFX CSS does not support CSS layout properties such as float, position, overflow, and width. However, the CSS padding and margins properties are supported on some JavaFX scene graph objects. All other aspects of layout are handled programmatically in JavaFX code. In addition, CSS support for HTML-specific elements such as Tables are not supported since there is no equivalent construct in JavaFX.

但是，要解决圆角背景问题，您可以将 -fx-background-radius 与 -fx-border-radius 一起使用。它们应该是相同的值。你可以找到它 here in the reference guide.

这是我认为您正在尝试制作的类似 bootstrap 的卡片示例。您将使用 -fx-background-radius: <top-left> <top-right> <bottom-right> <bottom-left>;，这将是 -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();
}

JavaFX css 有办法阻止背景颜色越过边框吗？

does JavaFX css have a way to stop background color getting over the border edges?

css

javafx

user-experience

styling