diff --git a/README.md b/README.md
index 8988d54..753e559 100644
--- a/README.md
+++ b/README.md
@@ -3,12 +3,15 @@
 - RXControls Version 8.x.y need javafx8
 - RXControls Version 11.x.y need javafx11+
 
+
 一个javafx的自定义组件库, 密码可见组件, 轮播图组件, 动态按钮组件等, 音频频谱可视化组件,歌词组件 等... <br />
 
  Javafx custom component library, password visible component, carousel component, dynamic button component,spectrum component,lyrics component etc...  <br />
 
->QQ: 9670453  <br />
-JavaFX QQ群: 518914410 <br/>
+
+>QQ: **9670453**  <br />
+JavaFX QQ群: **518914410** <br/>
+
 
 Maven dependency
 ```xml
@@ -23,7 +26,7 @@ Maven dependency
         <dependency>
             <groupId>com.github.leewyatt</groupId>
             <artifactId>rxcontrols</artifactId>
-            <version>8.0.0-alpha</version>
+            <version>11.0.0-alpha</version>
         </dependency>
     </dependencies>
 ```
@@ -31,7 +34,9 @@ Maven dependency
 - Carousel & FillButton inspired by [Gleidson28](https://github.com/Gleidson28)
 - Soft Page Transition inspired by [Yuichi.Sakuraba](https://gist.github.com/skrb/1c62b77ef7ddb3c7adf4)
 - Carousel inspired by [Swiper中文网](https://www.swiper.com.cn/)
+> Demos in the test directory.
 
+![](src/test/resources/screenshot/img6.png)
 ![](src/test/resources/screenshot/img1.png)
 ![](src/test/resources/screenshot/img2.png)
 ![](src/test/resources/screenshot/img3.png)
diff --git a/pom.xml b/pom.xml
index f5142b7..15ff890 100644
--- a/pom.xml
+++ b/pom.xml
@@ -6,13 +6,39 @@
 
     <properties>
         <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
-        <maven.compiler.source>8</maven.compiler.source>
-        <maven.compiler.target>8</maven.compiler.target>
+        <maven.compiler.source>11</maven.compiler.source>
+        <maven.compiler.target>11</maven.compiler.target>
     </properties>
+
     <groupId>com.github.leewyatt</groupId>
     <artifactId>rxcontrols</artifactId>
-    <version>8.0.0-alpha</version>
+    <version>11.0.0-alpha</version>
     <packaging>jar</packaging>
+    <dependencies>
+
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-controls</artifactId>
+            <version>11</version>
+        </dependency>
+        <!--  test files use fxml -->
+        <!-- https://mvnrepository.com/artifact/org.openjfx/javafx-fxml -->
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-fxml</artifactId>
+            <version>11</version>
+            <scope>test</scope>
+        </dependency>
+
+        <!--  test files use webview -->
+        <dependency>
+            <groupId>org.openjfx</groupId>
+            <artifactId>javafx-web</artifactId>
+            <version>11</version>
+            <scope>test</scope>
+        </dependency>
+
+    </dependencies>
 
     <build>
         <plugins>
@@ -22,11 +48,34 @@
                 <version>3.8.1</version>
                 <configuration>
                     <encoding>UTF-8</encoding>
-                    <source>8</source>
-                    <target>8</target>
+                    <source>11</source>
+                    <target>11</target>
                 </configuration>
             </plugin>
         </plugins>
     </build>
 
+    <!--    <build>-->
+    <!--        <resources>-->
+    <!--            <resource>-->
+    <!--                <directory>src/main/resources</directory>-->
+    <!--                <includes>-->
+    <!--                    <include>**/*</include>-->
+    <!--                </includes>-->
+    <!--                <filtering>false</filtering>-->
+    <!--            </resource>-->
+    <!--        </resources>-->
+    <!--        <plugins>-->
+    <!--            <plugin>-->
+    <!--                <groupId>org.apache.maven.plugins</groupId>-->
+    <!--                <artifactId>maven-compiler-plugin</artifactId>-->
+    <!--                <version>3.8.1</version>-->
+    <!--                <configuration>-->
+    <!--                    <source>11</source>-->
+    <!--                    <target>11</target>-->
+    <!--                </configuration>-->
+    <!--            </plugin>-->
+    <!--        </plugins>-->
+    <!--    </build>-->
+
 </project>
\ No newline at end of file
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXAudioSpectrum.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXAudioSpectrum.java
index 0750e23..1b0253d 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXAudioSpectrum.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXAudioSpectrum.java
@@ -26,9 +26,6 @@ package com.leewyatt.rxcontrols.controls;
 
 import com.leewyatt.rxcontrols.skins.RXAudioSpectrumSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EffectConverter;
-import com.sun.javafx.css.converters.EnumConverter;
-import com.sun.javafx.css.converters.ShapeConverter;
 import javafx.beans.property.IntegerProperty;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleIntegerProperty;
@@ -38,6 +35,9 @@ import javafx.css.CssMetaData;
 import javafx.css.Styleable;
 import javafx.css.StyleableObjectProperty;
 import javafx.css.StyleableProperty;
+import javafx.css.converter.EffectConverter;
+import javafx.css.converter.EnumConverter;
+import javafx.css.converter.ShapeConverter;
 import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
 import javafx.scene.effect.Effect;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXAvatar.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXAvatar.java
index d104a13..c2a479c 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXAvatar.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXAvatar.java
@@ -26,7 +26,6 @@ package com.leewyatt.rxcontrols.controls;
 
 import com.leewyatt.rxcontrols.skins.RXAvatarSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleDoubleProperty;
 import javafx.beans.property.SimpleObjectProperty;
@@ -34,6 +33,7 @@ import javafx.css.CssMetaData;
 import javafx.css.Styleable;
 import javafx.css.StyleableObjectProperty;
 import javafx.css.StyleableProperty;
+import javafx.css.converter.EnumConverter;
 import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
 import javafx.scene.image.Image;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXButtonBase.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXButtonBase.java
index 32b6b48..f8bd8a8 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXButtonBase.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXButtonBase.java
@@ -24,10 +24,10 @@
  */
 package com.leewyatt.rxcontrols.controls;
 
-import com.sun.javafx.css.converters.DurationConverter;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.ObjectPropertyBase;
 import javafx.css.*;
+import javafx.css.converter.DurationConverter;
 import javafx.event.ActionEvent;
 import javafx.event.EventHandler;
 import javafx.scene.Node;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXCarousel.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXCarousel.java
index 9394219..03b563a 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXCarousel.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXCarousel.java
@@ -29,13 +29,13 @@ import com.leewyatt.rxcontrols.animation.carousel.CarouselAnimation;
 import com.leewyatt.rxcontrols.enums.DisplayMode;
 import com.leewyatt.rxcontrols.pane.RXCarouselPane;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.BooleanConverter;
-import com.sun.javafx.css.converters.DurationConverter;
-import com.sun.javafx.css.converters.EnumConverter;
 import javafx.beans.property.*;
 import javafx.collections.FXCollections;
 import javafx.collections.ObservableList;
 import javafx.css.*;
+import javafx.css.converter.BooleanConverter;
+import javafx.css.converter.DurationConverter;
+import javafx.css.converter.EnumConverter;
 import javafx.scene.SubScene;
 import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXDigit.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXDigit.java
index fd444b7..caf94e4 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXDigit.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXDigit.java
@@ -25,9 +25,9 @@
 package com.leewyatt.rxcontrols.controls;
 
 import com.leewyatt.rxcontrols.skins.RXDigitSkin;
-import com.sun.javafx.css.converters.PaintConverter;
 import javafx.beans.property.SimpleIntegerProperty;
 import javafx.css.*;
+import javafx.css.converter.PaintConverter;
 import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
 import javafx.scene.paint.Color;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXFillButton.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXFillButton.java
index 710841a..a9c0696 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXFillButton.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXFillButton.java
@@ -27,12 +27,12 @@ package com.leewyatt.rxcontrols.controls;
 import com.leewyatt.rxcontrols.animation.fillbutton.*;
 import com.leewyatt.rxcontrols.skins.RXFillButtonSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
-import com.sun.javafx.css.converters.PaintConverter;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.beans.value.ChangeListener;
 import javafx.css.*;
+import javafx.css.converter.EnumConverter;
+import javafx.css.converter.PaintConverter;
 import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Skin;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXHighlightText.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXHighlightText.java
index 5fdac54..022903f 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXHighlightText.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXHighlightText.java
@@ -25,10 +25,10 @@
 package com.leewyatt.rxcontrols.controls;
 
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
-import com.sun.javafx.css.converters.SizeConverter;
 import javafx.beans.property.*;
 import javafx.css.*;
+import javafx.css.converter.EnumConverter;
+import javafx.css.converter.SizeConverter;
 import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
 import javafx.scene.text.TextAlignment;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXLineButton.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXLineButton.java
index 88ff33a..8fb31d8 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXLineButton.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXLineButton.java
@@ -29,12 +29,12 @@ import com.leewyatt.rxcontrols.animation.lineButton.LineAnimRise;
 import com.leewyatt.rxcontrols.animation.lineButton.LineAnimation;
 import com.leewyatt.rxcontrols.skins.RXLineButtonSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleDoubleProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.beans.value.ChangeListener;
 import javafx.css.*;
+import javafx.css.converter.EnumConverter;
 import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Skin;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXLrcView.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXLrcView.java
index 6846992..9c1dbb3 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXLrcView.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXLrcView.java
@@ -27,15 +27,15 @@ package com.leewyatt.rxcontrols.controls;
 import com.leewyatt.rxcontrols.pojo.LrcDoc;
 import com.leewyatt.rxcontrols.skins.RXLrcViewSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.DurationConverter;
-import com.sun.javafx.css.converters.SizeConverter;
-import com.sun.javafx.css.converters.StringConverter;
 import javafx.beans.property.DoubleProperty;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.SimpleObjectProperty;
 import javafx.beans.property.StringProperty;
 import javafx.beans.value.WritableValue;
 import javafx.css.*;
+import javafx.css.converter.DurationConverter;
+import javafx.css.converter.SizeConverter;
+import javafx.css.converter.StringConverter;
 import javafx.scene.control.Control;
 import javafx.scene.control.Skin;
 import javafx.util.Duration;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXPasswordField.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXPasswordField.java
index 69eccfc..8ab7aad 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXPasswordField.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXPasswordField.java
@@ -27,11 +27,11 @@ package com.leewyatt.rxcontrols.controls;
 import com.leewyatt.rxcontrols.enums.DisplayMode;
 import com.leewyatt.rxcontrols.skins.RXPasswordFieldSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
-import com.sun.javafx.css.converters.StringConverter;
 import javafx.beans.property.BooleanProperty;
 import javafx.beans.property.SimpleBooleanProperty;
 import javafx.css.*;
+import javafx.css.converter.EnumConverter;
+import javafx.css.converter.StringConverter;
 import javafx.scene.AccessibleAttribute;
 import javafx.scene.AccessibleRole;
 import javafx.scene.control.PasswordField;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXTextField.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXTextField.java
index 6dedf98..4fd9e65 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXTextField.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXTextField.java
@@ -28,13 +28,13 @@ import com.leewyatt.rxcontrols.enums.DisplayMode;
 import com.leewyatt.rxcontrols.event.RXActionEvent;
 import com.leewyatt.rxcontrols.skins.RXTextFieldSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
 import javafx.beans.property.ObjectProperty;
 import javafx.beans.property.ObjectPropertyBase;
 import javafx.css.CssMetaData;
 import javafx.css.Styleable;
 import javafx.css.StyleableObjectProperty;
 import javafx.css.StyleableProperty;
+import javafx.css.converter.EnumConverter;
 import javafx.event.EventHandler;
 import javafx.scene.control.Skin;
 import javafx.scene.control.TextField;
diff --git a/src/main/java/com/leewyatt/rxcontrols/controls/RXTranslationButton.java b/src/main/java/com/leewyatt/rxcontrols/controls/RXTranslationButton.java
index 88db97f..ff59d5f 100644
--- a/src/main/java/com/leewyatt/rxcontrols/controls/RXTranslationButton.java
+++ b/src/main/java/com/leewyatt/rxcontrols/controls/RXTranslationButton.java
@@ -26,11 +26,11 @@ package com.leewyatt.rxcontrols.controls;
 
 import com.leewyatt.rxcontrols.skins.RXTranslationButtonSkin;
 import com.leewyatt.rxcontrols.utils.RXResources;
-import com.sun.javafx.css.converters.EnumConverter;
 import javafx.css.CssMetaData;
 import javafx.css.Styleable;
 import javafx.css.StyleableObjectProperty;
 import javafx.css.StyleableProperty;
+import javafx.css.converter.EnumConverter;
 import javafx.scene.control.Label;
 import javafx.scene.control.Skin;
 
diff --git a/src/main/java/com/leewyatt/rxcontrols/skins/RXPaginationSkin.java b/src/main/java/com/leewyatt/rxcontrols/skins/RXPaginationSkin.java
index ec17a18..e41206e 100644
--- a/src/main/java/com/leewyatt/rxcontrols/skins/RXPaginationSkin.java
+++ b/src/main/java/com/leewyatt/rxcontrols/skins/RXPaginationSkin.java
@@ -25,12 +25,12 @@
 package com.leewyatt.rxcontrols.skins;
 
 import com.leewyatt.rxcontrols.controls.RXPagination;
-import com.sun.javafx.scene.control.skin.PaginationSkin;
 import javafx.collections.ListChangeListener;
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
 import javafx.scene.control.Pagination;
 import javafx.scene.control.TextField;
+import javafx.scene.control.skin.PaginationSkin;
 import javafx.scene.layout.HBox;
 
 /**
diff --git a/src/main/java/com/leewyatt/rxcontrols/skins/RXPasswordFieldSkin.java b/src/main/java/com/leewyatt/rxcontrols/skins/RXPasswordFieldSkin.java
index 78cedba..3e44a4d 100644
--- a/src/main/java/com/leewyatt/rxcontrols/skins/RXPasswordFieldSkin.java
+++ b/src/main/java/com/leewyatt/rxcontrols/skins/RXPasswordFieldSkin.java
@@ -26,13 +26,13 @@ package com.leewyatt.rxcontrols.skins;
 
 import com.leewyatt.rxcontrols.controls.RXPasswordField;
 import com.leewyatt.rxcontrols.enums.DisplayMode;
-import com.sun.javafx.scene.control.skin.TextFieldSkin;
 import javafx.beans.InvalidationListener;
 import javafx.beans.property.SimpleBooleanProperty;
 import javafx.beans.value.ChangeListener;
 import javafx.css.SimpleStyleableStringProperty;
 import javafx.scene.Cursor;
 import javafx.scene.control.TextField;
+import javafx.scene.control.skin.TextFieldSkin;
 import javafx.scene.input.MouseButton;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Region;
diff --git a/src/main/java/com/leewyatt/rxcontrols/skins/RXTextFieldSkin.java b/src/main/java/com/leewyatt/rxcontrols/skins/RXTextFieldSkin.java
index 6fe92d8..25e40e9 100644
--- a/src/main/java/com/leewyatt/rxcontrols/skins/RXTextFieldSkin.java
+++ b/src/main/java/com/leewyatt/rxcontrols/skins/RXTextFieldSkin.java
@@ -27,9 +27,9 @@ package com.leewyatt.rxcontrols.skins;
 import com.leewyatt.rxcontrols.controls.RXTextField;
 import com.leewyatt.rxcontrols.enums.DisplayMode;
 import com.leewyatt.rxcontrols.event.RXActionEvent;
-import com.sun.javafx.scene.control.skin.TextFieldSkin;
 import javafx.beans.value.ChangeListener;
 import javafx.scene.Cursor;
+import javafx.scene.control.skin.TextFieldSkin;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
diff --git a/src/main/java/module-info.java b/src/main/java/module-info.java
new file mode 100644
index 0000000..78a43cb
--- /dev/null
+++ b/src/main/java/module-info.java
@@ -0,0 +1,39 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2021 LeeWyatt
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ */
+module rxcontrols {
+    requires javafx.controls;
+    requires java.xml;
+
+    exports com.leewyatt.rxcontrols.animation.carousel;
+    exports com.leewyatt.rxcontrols.animation.fillbutton;
+    exports com.leewyatt.rxcontrols.animation.lineButton;
+    exports com.leewyatt.rxcontrols.controls;
+    exports com.leewyatt.rxcontrols.enums;
+    exports com.leewyatt.rxcontrols.event;
+    exports com.leewyatt.rxcontrols.pane;
+    exports com.leewyatt.rxcontrols.pojo;
+    exports com.leewyatt.rxcontrols.skins;
+    exports com.leewyatt.rxcontrols.utils;
+}
\ No newline at end of file
diff --git a/src/test/resources/screenshot/img6.png b/src/test/resources/screenshot/img6.png
new file mode 100644
index 0000000..a0e2a13
Binary files /dev/null and b/src/test/resources/screenshot/img6.png differ