这篇文章主要介绍了JavaFX实现UI美观效果代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
相对于Swing来说，JavaFX在UI上改善了很多，不仅可以通过FXML来排版布局界面，同时也可以通过CSS样式表来美化UI。
其实在开发JavaFX应用的时候，可以将FXML看做是HTML，这样跟CSS结合起来就跟开发WEB应用差不多，只不过两者之间的语法有点差异。
1. JavaFX CSS语法
JavaFX CSS样式跟HTML中的CSS样式很大程度上是相似的，比如class选择器、组合选择符、伪元素等。
.root { -fx-body-color : #F5F5F5; -fx-outer-border : #cecece; } VBox > .text-area.first { -fx-border-radius: 4 4 0 0; -fx-background-radius: 4 4 0 0; } .arrow-button:pressed { -fx-background-color: #e6e6e6; -fx-border-color: #acacac; -fx-effect: innershadow(gaussian, #adadad, 10, 0, 0, 3); }
但有一点不同的是，JavaFX的CSS样式语法都是以“-fx-”作为前缀。
比如：
/* 在CSS中，样式是这样写的 */ min-height: 46; max-height: 46; font-size: 18; /* 而在JavaFX中CSS必须这样写 */ -fx-min-height: 46; -fx-max-height: 46; -fx-font-size: 18;
其实，如果了解CSS，想要编写JavaFX的CSS难度并不是很大。
2. 用CSS美化控件
在没有经过CSS美化之前的JavaFX控件，其实跟Swing的控件差别不大，所以想要让控件更加美观还是要用CSS来修饰一下。
下面通过简单的样式，来美化一下之前的按钮：
-fx-min-height: 30; -fx-min-width: 80;-fx-background-color: #337ab7;">
效果图：
可以看到使用CSS美化过的按钮要比之前的按钮好看多了。
3. 使用CSS样式表美化控件
虽然在控件上加上CSS样式可以达到美化控件的效果，但是跟写CSS一样，这样的写CSS样式很不利于维护。
更好的方式的使用CSS文件统一维护样式，然后通过class选择器将样式绑定在控件上。
首先编程css样式
在AppUI.fxml相同的目录下创建AppUI.css，内容如下：
.go { -fx-text-fill: white; -fx-min-height: 30; -fx-min-width: 80; -fx-background-color: #337ab7; }
修改FXML引入样式
这里单独为AppUI.fxml引入样式，所以这需要在borderpane的stylesheets属性指定AppUI.css即可。
