如何给JavaFX TextField一个Swing样式的降低斜角边框？

我喜欢用BorderFactory.createLoweredBevelBorder（）创建边框的JTextField的3D效果。现在我正在使用JavaFX，边框的L &由CSS控制。默认外观只是一个简单的线条边框。我想通了如何编辑CSS文件加厚边界并改变其颜色：如何给JavaFX TextField一个Swing样式的降低斜角边框？

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

但是，如果你看一个Swing的产生降低斜角效果它是由具有不同颜色的4个侧面：2创建并具有45度角的边缘屏障。那么，我如何用CSS实现这一目标呢？

来源

2012-07-24 Mike O

的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实现尝试。参考上述指南。

来源

2012-07-25 09:18:02

谢谢，但你能给我一个关于参考指南的fx-border-style属性的解释的简化分解吗？这对我来说并没有什么意义： [，] *其中 =[phase ]？ [居中|在|里面外]？ [line-join [斜角 |斜角|回合]]？ [line-cap [square |。]对接|回合]]？其中= [none |固体|点缀|虚线|段（， [，] *）] – 2012-07-25 17:49:20

顺便说一句，使用4种不同的fx边界颜色确实工作得很好。这并不完美，因为边缘没有成角度，但我想我必须使用边框样式的线条连接设置来实现这一点。 – 2012-07-25 18:11:30

好吧，我想我明白了。我使用的CSS：。文本字段{-fx-background-color：#BEBEBE; -fx-border-color：＃676767白色白色＃676767; -fx-边框样式：固体内线连接斜接; } – 2012-07-25 18:38:30

我还没有看到你引用的Swing风格，但从你的描述来看，这应该会给你一个斜面的外观。

您应该能够通过简单地定义边界有插图而不是固体默认这样做。

.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.

来源

2012-07-25 00:12:23 DigTheDoug

style =“border：4px inset #aaaaaa;”在一个选项卡窗格上产生一个不可见的边界 – likejiujitsu 2013-02-27 00:10:23

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

来源

2016-04-06 21:42:35

如何给JavaFX TextField一个Swing样式的降低斜角边框？

回答

相关问题