JavaFX - 边框半径 <-> 背景颜色答案

【问题标题】：JavaFX - Border radius <-> Background colorJavaFX - 边框半径 <-> 背景颜色
【发布时间】：2017-09-19 08:13:10
【问题描述】：

如果我将 -fx-border-radius 和 -fx-border-width CSS 添加到一个简单的 GridPane 中，则其角落的背景不会被“削减”。

CSS：

.payload {
    -fx-hgap: 20px;
    -fx-padding: 40px;

    -fx-background-color: #2969c0;

    -fx-border-radius: 50px;
    -fx-border-width: 5px;
    -fx-border-color: black;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 10, 0, 0, 0);
}

关于结果的图片：

我该如何解决这个问题？

【问题讨论】：

标签： java css javafx gridpane

【解决方案1】：

您还需要添加半径属性来定义背景填充。否则它将采用零值，如您的图片所示。

您可以查看 CSS 规范 here。

您只需要添加-fx-background-radius 属性：

.payload {
    -fx-hgap: 20px;
    -fx-padding: 40px;

    -fx-background-color: #2969c0;
    -fx-background-radius: 50px;

    -fx-border-radius: 50px;
    -fx-border-width: 5px;
    -fx-border-color: black;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.8), 10, 0, 0, 0);
}

【讨论】：