Question

当我为我的Sudoku网格创建内部边框时，只要它碰到交叉点，它的一部分就不会显示出来。但是，在我的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;
}

JavaFX CSS行不会相交

1 个答案: