为什么我的CSS边框没有显示在JavaFX gui中？

Question

我正在尝试使用CSS边框在GUI（fxml）上显示墙。getStyleClass（）。add（）但它们没有出现。

我正在使用一个开关，将相应的样式类添加到单元格中。

Java代码：

private StackPane createCell(int row, int col) {
    var cell = new StackPane();

    cell.getStyleClass().add("cell");
    cell.getStyleClass().add((row + col) % 2 == 0 ? "light": "dark");

    for (var i = 0; i < 2; i++) {
        var pieceView = new ImageView(pieceImages[i]);
        pieceView.visibleProperty().bind(createBindingForPieceAtPosition(i, row, col));
        cell.getChildren().add(pieceView);
    }

    var wallsInDirections = state.checkAllWalls(new Position(row, col));
    for (var direction : wallsInDirections) {
        switch (direction) {
            case UP -> cell.getStyleClass().add("topwall");
            case RIGHT -> cell.getStyleClass().add("rightwall");
            case DOWN -> cell.getStyleClass().add("bottomwall");
            case LEFT -> cell.getStyleClass().add("leftwall");
        }
    }
    return cell;
}

CSS代码：

.cell.light {
    -fx-background-color: white;
}

.cell.dark {
    -fx-background-color: #F6F6F6;
}

.cell.light:hover, .cell.dark:hover {
    -fx-background-color: #FAFA33;
}

.topwall {
    border-top: solid black;
}

.rightwall {
    border-right: solid black;
}

.bottomwall {
    border-bottom: solid black;
}

.leftwall {
    border-left: solid black;
}

GUI事后图片：结果

Answer 1

您需要像这样添加边框宽度：

.topwall {
    border-top: 1px solid black;
}

.rightwall {
    border-right: 1px solid black;
}

.bottomwall {
    border-bottom: 1px solid black;
}

.leftwall {
    border-left: 1px solid black;
}

Answer 2

编辑我的CSS如下：

.topwall {
    -fx-border-style: solid none none none;
    -fx-border-color: black;
    -fx-border-width: 5;
}

.rightwall {
    -fx-border-style: hidden solid hidden hidden;
    -fx-border-color: black;
    -fx-border-width: 5;
}

.bottomwall {
    -fx-border-style: hidden hidden solid hidden;
    -fx-border-color: black;
    -fx-border-width: 5;
}

.leftwall {
    -fx-border-style: hidden hidden hidden solid;
    -fx-border-color: black;
    -fx-border-width: 5;
}

现在它们出现了，但每个单元格上只显示一个边框。

后果