javaFX - CSS 스타일(border 속성, background 속성)

border 속성 

 

 - 컨테이너 및 컨트롤의 경계선 스타일을 지정

 

예제)

자바

package thisisjava;



import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;



public class AppMain extends Application {

@Override

public void start(Stage primaryStage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));

Scene scene = new Scene(root);

scene.getStylesheets().add(getClass().getResource("app.css").toString());


primaryStage.setTitle("borderExample");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

}





FXML

<?xml version="1.0" encoding="UTF-8"?>



<?import java.lang.*?>

<?import javafx.geometry.*?>

<?import javafx.scene.layout.*?>

<?import javafx.scene.control.*?>



<HBox xmlns:fx="http://javafx.com/fxml" spacing="20">

   <padding>

      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />

   </padding>

   <children>

      <VBox id="vbox1" prefHeight="100" prefWidth="100"/>

      <VBox id="vbox2" prefHeight="100" prefWidth="100"/>

      <VBox id="vbox3" prefHeight="100" prefWidth="100"/>

      <VBox id="vbox4" prefHeight="100" prefWidth="100"/>

      <VBox id="vbox5" prefHeight="100" prefWidth="100"/>

   </children>

</HBox>




CSS

#vbox1 {

-fx-border-color: red;

-fx-border-width: 2;

}



#vbox2 {

-fx-border-color: red;

-fx-border-width: 3;

-fx-border-radius: 30;

}



#vbox3 {

-fx-border-insets: 0, 10, 20;

-fx-border-color: red, green, blue;

-fx-border-width: 1, 1, 1;

}



#vbox4 {

-fx-border-insets: 0, 10, 20;

-fx-border-color: red, green white green white, blue;

-fx-border-width: 1, 1, 1 3 3 1;

}



#vbox5 {

-fx-border-color: red;

-fx-border-width: 2;

-fx-border-style: solid dotted dashed segments(3, 2, 8, 2);

}

 

예제)

자바

package thisisjava;



import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Parent;

import javafx.scene.Scene;

import javafx.stage.Stage;



public class AppMain extends Application {

@Override

public void start(Stage primaryStage) throws Exception {

Parent root = FXMLLoader.load(getClass().getResource("root.fxml"));

Scene scene = new Scene(root);

scene.getStylesheets().add(getClass().getResource("app.css").toString());


primaryStage.setTitle("background");

primaryStage.setScene(scene);

primaryStage.show();

}


public static void main(String[] args) {

launch(args);

}

}





FXML

<?xml version="1.0" encoding="UTF-8"?>



<?import javafx.scene.layout.*?>

<?import javafx.geometry.*?>



<HBox xmlns:fx="http://javafx.com/fxml" spacing="10">

   <padding>

      <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />

   </padding>

   <children>

<VBox id="vbox1" prefHeight="100" prefWidth="100" />

<VBox id="vbox2" prefHeight="100" prefWidth="100" />

<VBox id="vbox3" prefHeight="100" prefWidth="100" />

<VBox id="vbox4" prefHeight="100" prefWidth="100" />

<VBox id="vbox5" prefHeight="100" prefWidth="100" />

<VBox id="vbox6" prefHeight="100" prefWidth="100" />

   </children>

</HBox>




CSS

 

#vbox1 {

-fx-background-color: rgba(0, 0, 0, 1);

}



#vbox2 {

-fx-background-color: linear-gradient(to right, #000000, #ffffff); 

}



#vbox3 {

-fx-background-color: radial-gradient(center 50% 50%, radius 50%, #ffffff, #000000); 

}



#vbox4 {

-fx-border-color: skyblue;

-fx-background-image: url("images/icon.gif");

}



#vbox5 {

-fx-border-color: skyblue;

-fx-background-image: url("images/icon.gif");

-fx-background-repeat: no-repeat;

}



#vbox6 {

-fx-border-color: skyblue;

-fx-background-image: url("images/icon.gif");

-fx-background-repeat: no-repeat;

-fx-background-position: center;

}