Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does the property "-fx-background-insets" mean and all means of its params

Tags:

css

javafx

What does every parameter of property "-fx-background-insets" perform on the "BUTTON"'s style? I'm using JavaFX recently.And when I change the parameter "2" to "200",button's style looks like nothing different.

.button{    
-fx-background-insets: 0 0 0 0, 0, 1, 2;
}
like image 249
Scrovor Avatar asked Dec 02 '22 12:12

Scrovor


2 Answers

.custom-node {
-fx-background-color: skyblue, derive(skyblue, 25%), derive(skyblue, 50%), derive(skyblue, 75%);
-fx-background-insets: 20, 40, 60, 80;
-fx-border-color: red; /* set border to red*/
-fx-border-width: 3; /* border width 3px */

enter image description here

https://jojorabbitjavafxblog.wordpress.com/2011/07/11/javafx-2-0-css-styling-part-1/

ps: white is root background color

like image 159
Vaclav Konecny Avatar answered Dec 05 '22 18:12

Vaclav Konecny


According to the documentation, these values are represented as

A series of size values or sets of four size values, separated by commas. A single size value means all insets are the same. Otherwise, the four values for each inset are given in the order top, right, bottom, left. Each comma-separated value or set of values in the series applies to the corresponding background color.

So in your example, the insets apply to a series of four background colors (defined by four comma-separated values provided to the -fx-background-color property).

The first has zero insets on all fours sides (explicitly stated as a list of four zeros).

The second also has zero insets on all four sides (defined using a shorthand of a single zero value).

The third and fourth have insets of one pixel and two pixels, respectively, again defined using the single value.

like image 20
James_D Avatar answered Dec 05 '22 18:12

James_D