Question

我喜欢由BorderFactory.createLoweredBevelBorder（）创建的带有边框的JTextField的3D效果。现在我正在使用JavaFX，边框的L＆amp; F由CSS控制。默认外观只是一个简单的线条笔划边框。我想出了如何编辑CSS文件以加粗边框并改变其颜色：

.text-field { -fx-border-color: color; -fx-border-width: #; }

但是如果你看一下Swing产生的降低的斜面效果，它是通过在4个边中的2个边上具有不同颜色并且具有45度角的边缘屏障来创建的。那我怎么用CSS实现呢？

Answer 1

JavaFX CSS Reference Guide说：

虽然JavaFX CSS解析器将解析有效的CSS语法，但它不是完全兼容的CSS解析器。人们不应该期望解析器能够处理语法未在本文档中指定。

border或border-top和其他人是此类不受支持的类别要降低斜角边框，请尝试

.text-field {
    -fx-border-insets: 0;
    -fx-border-width: 2px;
    -fx-border-color: black lightgray lightgray black;
}

或者尝试使用内部阴影的JavaFX风格方式

.text-field {
    -fx-effect: innershadow(three-pass-box, gray, 12 , 0.5, 1, 1);
}

然而，您想要的真实风格可以通过-fx-border-style属性IMO来实现。请参阅上述指南。

Answer 2

-fx-border-color: top right bottom left;
-fx-border-color: transparent transparent red transparent;

Answer 3

我没有看到你所提到的Swing风格，但根据你的描述，这应该给你一个斜面的样子。

您应该可以通过简单地将边框定义为插入而不是默认的 solid 来实现。

.text-field {
    border: 4px inset #aaaaaa;
}

或者，如果您想要更多控制，可以将边框的每一边设置为不同的颜色：

.text-field {
    border-top: 4px solid #555555;
    border-left: 4px solid #555555;
    border-bottom: 4px solid #aaaaaa;
    border-right: 4px solid #aaaaaa;
}

There are also outset, ridge and other border types to play around with.

如何为JavaFX TextField提供Swing风格的降低斜角边框？

3 个答案: