在 css javafx 中创建 3D 外观的“下沉”标签效果

Question

所以，我现在一直在尝试创建一个非常漂亮的“可复制标签”，本质上它是一个文本字段，样式像标签，但复制起来更直观（如果我剥离所有文本字段中的边框样式/etc/editable 并使其与标签完全一样，您可以从中复制并不明显）。我认为可能看起来非常不错的一种解决方案是在其各自的容器中给标签一个轻微的“凹陷”外观。

有点像输入字段（页面顶部的“搜索词...”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 build，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 个像素，因此如果不应用效果，则可以看到 1px 的白色边框。

黑色内阴影以 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();
}

Answer 2

这样的事情怎么样？即使没有白色的第二个内阴影也很好看。

一个很好的技巧是在背面有一个非常非常微弱的渐变，从较暗（顶部）到较亮（底部），这会产生隐藏来自顶部的光线的效果，所以它只是微弱可在底部访问。

这也是一个很好的工具，可以用来做类似的事情：

• http://www.cssmatic.com/box-shadow 用于盒子阴影
• http://www.colorzilla.com/gradient-editor/ 用于渐变

.label {
  -webkit-box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.75), inset -1px -1px 1px 0px rgba(255,255,255,0.75);
     -moz-box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.75), inset -1px -1px 1px 0px rgba(255,255,255,0.75);
          box-shadow: inset 1px 1px 1px 0px rgba(0,0,0,0.75), inset -1px -1px 1px 0px rgba(255,255,255,0.75);
  padding: 7px 10px;
  background: #eee;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  width: 100px;


    background: #aaaaaa; /* Old browsers */
    background: -moz-linear-gradient(top,  #aaaaaa 0%, #cccccc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aaaaaa), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #aaaaaa 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #aaaaaa 0%,#cccccc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #aaaaaa 0%,#cccccc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #aaaaaa 0%,#cccccc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
body { background: #ccc; }

<div class="label">
  Text
</div>