JavaFX按钮按压时边框与背景间隙问题修复求助

看起来你遇到的是JavaFX按钮样式中背景与边框对齐的典型问题，根源在于-fx-background-insets的设置冲突以及默认聚焦样式的干扰。我来帮你一步步解决：

问题原因分析 #

1. 你设置了多层-fx-background-insets，按压状态下仅修改背景色但沿用了原insets配置，导致部分区域未被新背景色覆盖，出现旧颜色间隙。
2. 调整边框宽度后，背景与边框的对齐关系被打破，四周出现空隙。
3. 默认的聚焦样式会修改按钮底部的insets，导致聚焦时（比如数字8按钮）下间隙被异常填充。

修复后的CSS样式 #

.root { 
    -fx-font-size: 15pt; 
} 

.button { 
    -fx-background-radius: 0; 
    -fx-border-style: solid; 
    -fx-border-color: gray; 
    -fx-border-width: 0.3em; /* 使用em单位适配字体，或改为1px固定宽度 */
    -fx-background-color: #E0E0E0; 
    -fx-background-insets: 0; /* 让背景完全填充按钮区域，与边框无间隙 */
    -fx-padding: 0; /* 移除默认内边距，避免内容与边框间的空隙 */
} 

.button:pressed { 
    -fx-background-color: #B2B2B2; 
    -fx-background-insets: 0.3em; /* 按压时背景内缩，模拟凹陷效果，与边框宽度一致 */
    /* 若不需要凹陷效果，直接设为0即可，仅保留颜色变化 */
} 

.button:focused { 
    -fx-background-insets: 0; /* 覆盖默认聚焦insets，避免底部间隙异常填充 */
    -fx-focus-color: transparent; /* 可选：移除默认聚焦边框，保持样式统一 */
    -fx-faint-focus-color: transparent; 
}

.button-special { 
    -fx-background-color: #EA9747; 
    -fx-text-fill: white; 
    -fx-font-size: 17pt; 
}

关键调整说明 #

• 统一背景与边框对齐：将正常状态的-fx-background-insets设为0，让背景完全填充按钮的整个区域，彻底消除背景与边框间的间隙。
• 按压状态优化：按压时设置-fx-background-insets与边框宽度相同，既模拟了按钮按下的凹陷感，又保证背景色完全覆盖内部区域，不会露出旧颜色。
• 覆盖聚焦样式：强制设置button:focused的-fx-background-insets为0，解决聚焦时底部间隙被填充的问题；同时可移除默认聚焦边框，让按钮样式更一致。
• 规范单位与内边距：使用em单位定义边框宽度，适配字体大小；移除默认内边距，让按钮布局更紧凑。

这样调整后，按钮按压时的颜色变化会完全覆盖整个按钮区域，边框与背景间不会出现间隙，聚焦状态也不会产生异常效果。

内容的提问来源于stack exchange，提问作者ki81