css - 在 css javafx 中创建 3D 外观 'sunken' 标签效果

Question

所以，我已经尝试了一段时间来创建一个非常漂亮的“可复制标签”，它本质上是一个文本字段，样式像标签，但从中复制更直观(如果我去掉所有文本字段中的边框样式/等/可编辑并使其完全像标签，您可以从中复制它并不明显)。我认为可能看起来非常不错的一种解决方案是让标签在其各自的容器中呈现轻微的“凹陷”外观。

有点像输入字段(页面顶部显示“搜索词...”的字段 here 忽略视差效应。我能得到的最好结果是使用带有三遍框尝试让它看起来尽可能凹陷，但如果你愿意的话，线条还不够“清晰”。我想我可以用内阴影效果来完成它，我只是不够专业想办法把它变成正确的形式。

到目前为止我的尝试是这样的:

为此，我使用了以下 CSS:

.label { 
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 5, 0.0 , 3, 3 );
    -fx-background-color: darkgrey;
}

正如您所看到的，它确实具有“凹陷”效果，只是非常微妙，线条一点也不锐利，当我将其移植到其他设备时，我选择的颜色恰好将效果放大了一点颜色，差异要小得多。

这都是使用最新的 java 8 构建、windows、桌面应用程序。

Answer 1

这个怎么样:

.copyable-label {
     -fx-background-color: rgba(255,255,255,0.75),
                           linear-gradient(to bottom,#aaaaaa 0%,#cccccc 100%);
     -fx-background-insets: 0,1;
     -fx-padding: 7px;
     -fx-background-radius: 3px;
     -fx-border-radius: 3px;
     -fx-effect: innershadow(three-pass-box, rgba(0,0,0,0.75),1,0,1,1);
     -fx-font: 14px "Arial";
     -fx-text-fill: black;
 }

我使用了@Chen-Asraf 建议的样式，但在 JavaFX 中。

主要区别在于您不能将多个效果叠加应用，但可以在背景上应用。背景颜色使用逗号分隔值，背面为白色，顶部为线性渐变，但内嵌 1 像素，因此如果未应用效果，可以看到 1 像素的白色边框。

黑色内阴影以 1 px 半径和 1x1 偏移应用。这也可以在后台使用三层生成，但没有效果:

.copyable-label {
     -fx-background-color: rgba(0,0,0,0.75),
                           rgba(255,255,255,0.75),
                           linear-gradient(to bottom,#aaaaaa 0%,#cccccc 100%);
     -fx-background-insets: 0 1 1 0, 1 0 0 1, 1;
     -fx-padding: 7px;
     -fx-background-radius: 3px;
     -fx-border-radius: 3px;
     -fx-font: 14px "Arial";
     -fx-text-fill: black;
 }

这个场景有一个 Label 和一个 Textfield，两者的样式相同。将文本字段设置为不可编辑，这些控件之间的唯一区别是您只能选择和复制文本字段的文本。

@Override
public void start(Stage primaryStage) {
    Label label=new Label("Text");
    label.getStyleClass().add("copyable-label");
    label.setPrefWidth(100);

    TextField textField=new TextField("Text");
    textField.setEditable(false);
    textField.getStyleClass().add("copyable-label");
    textField.setPrefWidth(100);
    textField.setMinWidth(100);
    textField.setMaxWidth(100);

    VBox root = new VBox(20,label,textField, new Button("Ok"));
    root.setStyle("-fx-background-color: #ccc;");
    root.setAlignment(Pos.CENTER);

    Scene scene = new Scene(root, 300, 250);
    scene.getStylesheets().add(getClass().getResource("root.css").toExternalForm());
    primaryStage.setTitle("Hello World!");
    primaryStage.setScene(scene);
    primaryStage.show();
}