在css中创建三维外观的'凹陷'标签效果javafx

Question

因此，我一直在尝试一段时间来创建一个非常漂亮的'可复制标签'，其中，本质上它是一个文本字段，样式类似于标签，但更直观的复制（如果我从文本字段中删除所有边框样式/ etc /可编辑的，并使其完全像一个标签，它是根本不明显，你可以从它复制）。我认为一种解决方案可能看起来非常好，就是让标签在其各自的容器中稍微“凹陷”一下。

东西有点像输入字段（在页面顶部显示'搜索字词...'的那个忽略了帕拉克斯效应。我能得到的最好的是通过使用内部阴影与三尽量让它看起来尽量凹陷，但如果你愿意的话，线条不够“锐利”，我认为我可以用Innershadow效果来实现它，我只是不够专业如何将它哄到适当的形式

我尝试到目前为止看起来像：

而要实现这一目标我用下面的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，desktop应用程序。

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>