为什么 -fx-border-color 重置 TextField 的边框半径？

Question

我想更改 TextField 使用 JavaFX CSS 的背景和边框颜色。我不明白为什么 -fx-border-color 重置 TextField 的边框半径？

如您所见，第二个 TextField 没有边框半径。

sample/style.css:

.validation-error {
    -fx-background-color: #FFF0F0;
    -fx-border-color: #DBB1B1;
}

sample/Main.java

package sample;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        TextField txtWithoutStyle = new TextField();
        txtWithoutStyle.setText("Without Style");

        TextField txtWithStyle = new TextField();
        txtWithStyle.setText("With Style");
        txtWithStyle.getStyleClass().add("validation-error");

        VBox root = new VBox();
        root.setPadding(new Insets(14));
        root.setSpacing(14);
        root.getChildren().addAll(txtWithoutStyle, txtWithStyle);
        root.getStylesheets().add("/sample/style.css");

        Scene scene = new Scene(root, 300, 275);

        primaryStage.setTitle("Hello World");
        primaryStage.setScene(scene);
        primaryStage.show();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

更新 1

附加问题：为什么 -fx-background-color 删除 TextField 边框（只需从 style.css 中删除 -fx-border-color 即可重现）？

Answer 1

default stylesheet 通过使用 "nested backgrounds" 而不是边框将边框应用于文本字段（以及几乎所有其他控件）。

默认样式表中 TextInputControl 的一些设置是：

-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
    linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;

这基本上设置了两种背景颜色（均由线性渐变定义），一种（"outer" 一种）颜色基于 -fx-text-box-border，另一种颜色基于 -fx-control-inner-background。 "outer" 背景在 "inner" 背景之外，因为它们分别有 0 和 1 的插图；通过为每个背景分别设置 3 和 2 的半径来创建最终表观边界的弯曲边缘。

这至少在传言中比在 CSS 中使用实际边框更有效，因此选择这种技术是出于性能原因。

因此，要保留边框的半径，您可以使用相同的技术，只需覆盖两种背景颜色即可：

.validation-error {
    -fx-background-color: #DBB1B1, #FFF0F0 ;
 }

请注意，您也可以只替换 "looked-up-colors"，这也将保留正在使用的细微线性渐变：

.validation-error {
    -fx-text-box-border: #DBB1B1 ;
    -fx-control-inner-background: #FFF0F0 ;
  }

为了在聚焦时突出显示，默认使用名为 -fx-focus-color 和 -fx-faint-focus-color 的颜色：因此在后一个版本中，您可能也想重新定义它们：

.validation-error {
    -fx-text-box-border: #DBB1B1 ;
    -fx-control-inner-background: #FFF0F0 ;
    -fx-focus-color: #FF2020 ;
    -fx-faint-focus-color: #FF202020 ;
  }

为什么 -fx-border-color 重置 TextField 的边框半径？

Why -fx-border-color reset border radius of TextField?

javafx

javafx-8

javafx-css