JavaFX 按钮填充 CSS

在JavaFX中，可以使用CSS来对各种UI组件进行样式定制。本文将重点介绍如何使用CSS来对JavaFX中的按钮进行样式定制。

简单样式

首先，我们可以使用简单的CSS样式来改变按钮的外观。比如，我们可以改变按钮的颜色和字体属性。具体的CSS代码如下所示：

.button {
    -fx-background-color: #2196F3;
    -fx-text-fill: white;
    -fx-font-family: "Arial";
    -fx-font-size: 16px;
}

这样一来，按钮的背景颜色将变成蓝色，字体颜色为白色，字体使用了Arial字体，字号为16。

高级样式

除了简单的样式定制，我们还可以使用更高级的CSS样式来对按钮进行更加复杂的设计。比如，我们可以设置按钮的渐变色背景和阴影效果。具体的代码如下所示：

.button {
    -fx-background-color:
        linear-gradient(#ffd65b, #f9b700),
        radial-gradient(center 50% -40%, radius 200%, #e6fbff 45%, #f4f4f4 50%);
    -fx-background-radius: 30;
    -fx-background-insets: 0;
    -fx-text-fill: #654321;
    -fx-font-family: "Arial";
    -fx-font-size: 20px;
    -fx-padding: 10 20 10 20;
    -fx-effect: dropshadow( three-pass-box, #444444, 10, 0, 0, 0 );
}

这样一来，按钮将拥有一个渐变色背景，以及阴影效果。其中，-fx-background-color的值由两个渐变背景色构成，使用linear-gradient和radial-gradient来定义。-fx-background-radius指定了背景的圆角半径，-fx-background-insets为了使背景颜色不被外侧边框遮盖住而设定。-fx-text-fill为字体颜色，-fx-font-family和-fx-font-size为字体设置。-fx-padding为内边距，-fx-effect为按钮附带的阴影效果。

在实际应用中，我们可以根据需要，自由组合这些样式属性，实现我们所需要的按钮样式。

应用样式

在JavaFX中，应用CSS样式分为两种方式：内部样式和外部样式。

内部样式

对于单个的按钮，我们可以在代码中直接为其设置样式，代码如下所示：

Button button = new Button("Click Me");
button.setStyle("-fx-background-color: #2196F3; -fx-text-fill: white;");

这里的setStyle()方法就是为组件设置CSS样式的方法。

外部样式

对于多个按钮，或者整个程序中的所有按钮，我们可以将样式写入到一个CSS文件中，并在程序中统一加载。假设我们已经将样式写入到style.css文件中，那么可以使用如下代码来加载样式：

Scene scene = new Scene(root, 800, 600);
scene.getStylesheets().add("/path/to/style.css");

其中，root是程序中根节点的引用，add()方法就是将样式表进行加载的方法。样式表路径需要根据实际情况进行修改。

总之，通过上述的学习，相信大家已经了解了如何使用CSS来对JavaFX中的按钮进行样式定制。希望本文能够对大家的学习有所帮助。