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

Question

我试着做一个卡，像引导CSS，但使用JavaFX组件。我想要一个圆形的边框，但是顶部部分(标题)的背景色给我带来了问题。

背景溢出边界，看上去相当丑陋。我在googled上搜索了一下，发现隐藏在背景颜色上的溢出应该可以解决这个问题。不过，JavaFX css似乎没有这种功能。还有别的办法解决这个问题吗？

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

​

​

Answer 1

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

JavaFX CSS不支持CSS布局属性，如浮点数、位置、溢出和宽度。但是，某些JavaFX场景图对象支持CSS填充和边距属性。布局的所有其他方面都是用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();
}