如何給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樣式的降低斜角邊框？

回答

相關問題