最佳答案
使用Region
的-fx-shape
属性指定 SVG path .
.login-box {
-fx-spacing: -15;
-fx-fill-height: false;
}
.login-box > .button {
-fx-shape: "M0,1 L1,0 L2,1 L1,2 Z";
-fx-min-width: 60;
-fx-max-width: 60;
-fx-min-height: 60;
-fx-max-height: 60;
}
.login-box > .textfield-container {
-fx-spacing: 8;
}
.login-box > .textfield-container > .text-field {
-fx-shape: "M200,0 H0 V30 H170 Z";
}
.login-box > .textfield-container > .password-field {
-fx-shape: "M170,0 H0 V30 H200 Z";
}
.login-box > .textfield-container > .text-field, .login-box > .textfield-container > .password-field {
-fx-min-width: 200;
-fx-max-width: 200;
-fx-min-height: 30;
-fx-max-height: 30;
-fx-padding: 4 30 4 8;
}
两个 SVG 路径都从右上角 (M200,0
/M170,0
) 开始,然后绘制到左上角 ( H0
),继续向下绘制到左下角(V30
),然后绘制到右下角(V170
/V200
code>) 并最终关闭路径 (Z
)。
查看结构:
login-box (HBox)
|---- textfield-container (VBox)
| |--- text-field (TextField)
| |--- password-field (PasswordField)
|
|---- button (Button)
关于css - 使用 CSS 在 JavaFX 中为 TextField 创建形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36764271/