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

Question

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

背景溢出边框，看起来相当难看。我用谷歌搜索了一下，发现背景颜色上的溢出：隐藏应该可以解决它。 JavaFX css 似乎没有这个功能。还有其他方法可以解决这个问题吗？

到目前为止我的解决方案：

Answer 1

如JavaFX CSS 参考指南中所述，不支持溢出。

JavaFX CSS 不支持 CSS 布局属性，例如 float、position、overflow 和 width。但是，某些 JavaFX 场景图对象支持 CSS padding 和 margins 属性。布局的所有其他方面都在 JavaFX 代码中以编程方式处理。此外，不支持对 HTML 特定元素（例如表格）的 CSS 支持，因为 JavaFX 中没有等效的构造。

但是，要解决圆形背景问题，您可以将

-fx-background-radius

与

-fx-border-radius

一起使用。它们应该是相同的值。您可以在参考指南中找到它。

---

这是一个我认为您正在尝试制作的类似引导卡的示例。您将使用

-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();
}

Answer 2

-fx-background-radius 也为我工作