javafx显示image_如何摆脱JavaFX中的重点突出显示

javafx显示image

今天，有人问我是否知道摆脱JavaFX控件（分别是按钮）的焦点突出的方法：

button_hover

有关此问题的大多数文章和提示建议添加：

.button:focused {-fx-focus-color: transparent; 
}

但是使用这种样式，仍然会留下这样的光芒：

button_glow

为了摆脱这种光芒，通常还建议另外使用-fx-background-insets ：

.button:focused {-fx-focus-color: transparent; -fx-background-insets: -1.4, 0, 1, 2;
}

但这导致呈现的按钮没有外部边框：

button_insets

与默认按钮样式相比：

这仍然是一种“亮点”。

（为什么实际上有4个插入值？）

看一下modena.css定义的JavaFX默认样式，可以modena.css更多信息：

/* A bright blue for the focus indicator of objects. Typically used as the
* first color in -fx-background-color for the "focused" pseudo-class. Also
* typically used with insets of -1.4 to provide a glowing effect.
*/
-fx-focus-color: #f25f29;
-fx-faint-focus-color: #f25f2933;

显然，不仅有一种焦点颜色-fx-focus-color而且还有-fx-faint-focus-color ，用于创建这种发光效果（在设置-fx-focus-color:transparent;时仍然存在）。

仔细查看.button：focused伪类（在modena.css ）：

.button:focused {-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; -fx-background-insets: -2, -0.3, 1, 2;-fx-background-radius: 7, 6, 4, 3;
}

尝试一些极端的色彩可以揭示这种安排：

.button:focused {-fx-focus-color: red;-fx-faint-focus-color: green;-fx-inner-border: blue;-fx-body-color: orange;-fx-background-color: -fx-faint-focus-color, -fx-focus-color, -fx-inner-border, -fx-body-color; -fx-background-insets: -2, -0.3, 1, 2;-fx-background-radius: 7, 6, 4, 3;
}

button_hover_style

回到主题，删除焦点高亮的聪明方法可能是对.button：focus也使用默认按钮样式（其他控件使用相同的方法）：

.button:focused {-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color; -fx-background-insets: 0, 1, 2;-fx-background-radius: 5, 4, 3;
}