css - 为什么我的上下文菜单边框在 JavaFX/CSS 中设置为 1 像素时呈现 2 像素宽？

Question

我正在尝试使用 CSS 在 JavaFX 中设置上下文菜单的边框样式。

问题

我想要一条 1 像素的黑色实线作为上下文菜单的边框。相反，我得到一条 2 像素的黑色实线作为上下文菜单的边框。

这是显示像素边框的两张图片。

100%

1000%

很明显，边框有 2 个像素而不是 1 个像素。

CSS

我正在使用以下 CSS 设置边框:

.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: red;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-effect: null;
    -fx-border-width: 1; /* I also tried 1px here */
    -fx-border-color: black;
    -fx-border-style: solid outside line-cap square;
    -fx-padding: 0;
}

我还将子节点设置为透明边框和背景，只是为了排除它们造成的后果:

.context-menu .menu-item,
.context-menu .menu-item .label {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

问题

1. 为什么我得到的是 2 像素的边框，而不是 1 像素的边框？
2. 我怎样才能得到一个 1 像素的边框，而不是这个 2 像素的边框？

Answer 1

StackOverflow 上已经有几个答案可以解释为什么笔画似乎不能始终呈现 1px 的边框:

1. JavaFX graphics “blurred” or anti-aliased? (No effects used)
2. What are a line's exact dimensions in JavaFX 2?

我找到的解决此问题的最佳方法是完全不使用边框。相反，我使用多个背景和 -fx-background-insets 来模拟边框:

.context-menu {
    -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
    -fx-background-color: black, red;
    -fx-background-insets: 0, 1;
}

这就是干净的 1 像素硬边框所需的一切