JavaFX CSS 行不会相交

Question

当我为我的数独网格创建内部边框时，它的一部分在碰到交叉点时不显示。但是，在我的 Java 代码中，如果我删除“topBorder”或“rightBorder”的双“for”循环中的任何一个，边框将完全穿过网格。但是，如果存在双“for”循环，则边框的一部分会丢失。

CSS 代码:

.topBorder {
-fx-border-color: black;
-fx-pref-width: 3em; 
-fx-pref-height: 3em; 
-fx-border-width: 3 0 0 0;
}

.rightBorder {
-fx-border-color: black;
-fx-pref-width: 3em; 
-fx-pref-height: 3em; 
-fx-border-width: 0 3 0 0;
}

示例 Java 代码:

for(int i = 0; i < 9; i++) {
                if((tf2D[col][row] == tf2D[i][3]) ||
                        (tf2D[col][row] == tf2D[i][6])) {
                    limitNumberTextField.getStyleClass().add("topBorder");
                }
            }

for(int j = 0; j < 9; j++) {
                if((tf2D[col][row] == tf2D[2][j]) ||
                        (tf2D[col][row] == tf2D[5][j])) {
                    limitNumberTextField.getStyleClass().add(
                            "rightBorder");
                }
            }

图片:

Missing border at intersection points

Answer 1

如果一个元素同时具有样式类 topBorder 和样式类 rightBorder，您尝试应用两种边框样式(它们相互矛盾)。发生这种情况时，应用样式表中出现的最后一条规则，即你得到规则

-fx-border-color: black;
-fx-pref-width: 3em; 
-fx-pref-height: 3em; 
-fx-border-width: 0 3 0 0;

这明确提供了无顶部边框，因此对于具有两种样式类的单元格，顶部没有边框。

您可以尝试为具有两种样式类的单元格添加特定规则:

.topBorder {
-fx-border-color: black;
-fx-pref-width: 3em; 
-fx-pref-height: 3em; 
-fx-border-width: 3 0 0 0;
}

.rightBorder {
-fx-border-color: black;
-fx-pref-width: 3em; 
-fx-pref-height: 3em; 
-fx-border-width: 0 3 0 0;
}

.topBorder.rightBorder {
-fx-border-color: black;
-fx-pref-width: 3em; 
-fx-pref-height: 3em; 
-fx-border-width: 3 3 0 0;
}