javafx css 魔法玩转

首先来看下javafx css是什么东西：官网的解释

JavaFX Cascading Style Sheets (CSS) is based on the W3C CSS version 2.1 [1] with some additions from current work on version 3 [2]. JavaFX CSS also has some extensions to CSS in support of specific JavaFX features. The goal for JavaFX CSS is to allow web developers already familiar with CSS for HTML to use CSS to customize and develop themes for JavaFX controls and scene graph objects in a natural way. The JavaFX CSS support and extensions have been designed to allow JavaFX CSS style sheets to be parsed cleanly by any compliant CSS parser, even though it might not support JavaFX extensions. This enables the mixing of CSS styles for JavaFX and for other purposes (such as for HTML pages) into a single style sheet. To this end, all JavaFX property names have been prefixed with a vendor extension of "-fx-". Even properties that might seem to be compatible with standard HTML CSS have been prefixed, because JavaFX has somewhat different semantics for their values.

就是说你原来写网站app的那套css不适用。

不能用width,height,float

在我实际的优化当中，我是用padding来设置的

至于块元素的位置 我让java开发人员用坐标设置，前端无能为力。

前端块状元素他是直接给你弄好了。

来看下

Accordion
Button
ButtonBase
Cell
CheckBox
CheckMenuItem
ChoiceBox
ColorPicker
ComboBox
Control
Hyperlink
IndexedCell
Label
Labeled
ListCell
ListView
Menu
MenuBar
MenuButton
MenuItem
MenuItemBase
Pagination
PasswordField
ProgressBar
ProgressIndicator
RadioButton
RadioMenuItem
ScrollBar
ScrollPane
Separator
Slider
SplitMenuButton
SplitPane
TabPane
TableView
TextArea
TextInputControl
TextField
TitledPane
ToggleButton
ToolBar
Tooltip
TreeCell
TreeView

　　他的样式设置方式有fx定义的，其实就是封装的。



javafx css有集成了css3 / css2 但是css3的动画属性一个都不支持

01   Font  字体
font-family  系统提供了四种 + 系统默认
font-size  1-9
font-style=  [ normal | italic | oblique ] 正常 斜体 斜
font-weight=  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ]
[[ <font-style> || <font-weight> ]? <font-size> <font-family> ]
02   Shadow阴影  Drop Shadow  Inner Shadow
Drop Shadow
dropshadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )
<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]
Inner Shadow
innershadow( <blur-type> , <color> , <number> , <number> , <number> , <number> )
<blur-type> = [ gaussian | one-pass-box | three-pass-box | two-pass-box ]

03   cssProperty

-fx-cursor   [ null | crosshair | default | hand | move | e-resize | h-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | v-resize | text | wait ]
-fx-blend-mode [ add | blue | color-burn | color-dodge | darken | difference | exclusion | green | hard-light | lighten | multiply | overlay | red | screen | soft-light | src-atop | src-in | src-out | src-over ]
-fx-effect
-fx-opacity
-fx-rotate
-fx-scale-x
-fx-scale-y
-fx-scale-z
-fx-translate-x
-fx-translate-y
-fx-translate-z
Visibility  visible | hidden | collapse | inherit

-fx-alignment  top-left | top-center | top-right | center-left | center | center-right bottom-left | bottom-center | bottom-right | baseline-left | baseline-center | baseline-right | top-left
01  Background
-fx-background-color
-fx-background-insets
-fx-background-radius
-fx-background-image
-fx-background-position  left | center | right | center | [ top | bottom
-fx-background-repeat  repeat-x | repeat-y | [repeat | space | round | stretch | no-repeat]{1,2}
02   Border
-fx-border-color
-fx-border-insets
-fx-border-radius
-fx-border-style
-fx-border-width

03 padding
-fx-padding
-fx-position-shape
-fx-scale-shape
-fx-shape
-fx-snap-to-pixel
-fx-background-fills
-fx-background-images
-fx-stroke-borders
-fx-image-borders

-fx-arc-height

-fx-arc-width

　　

有一个属性就是

box-shadow