Javafx是一種常用的開發語言,它的圖形用戶界面(UI)使用CSS(Cascading Style Sheets)來布置和設計。其中,JavaFX提供了種類豐富的CSS樣式,可以讓開發者根據自身的需求來進行選擇。
最近,我在使用Javafx做UI設計時發現,它提供的CSS樣式十分美觀,下面分享幾個我比較喜歡的樣式。
.text-field { -fx-prompt-text-fill: #b2b2b2; -fx-text-fill: #4e4e4e; -fx-border-width: 1px; -fx-border-color: #e8e8e8; -fx-border-radius: 0px; -fx-background-color: #fbfbfb; }
上述代碼提供了一個文本框樣式的設置,其中使用了淡淡的灰色作為提示信息的顏色,黑色作為輸入信息的顏色,灰色作為邊框的顏色,而背景采用了淺灰色。
.button { -fx-border-radius: 20px; -fx-background-color: #41c1f7; -fx-font-size: 16px; -fx-text-fill: white; }
上述代碼用于設置按鈕的樣式,其中,按鈕的邊框采用的是圓弧邊框,背景顏色為藍色,而按鈕的字體顏色采用白色,整個風格非常簡潔明了。
.progress-bar .track { -fx-background-color: #ebebeb; -fx-border-radius: 4px; } .progress-bar .bar { -fx-background-color: #01b7f1; -fx-border-radius: 4px; }
上述代碼適用于設置一個進度條的樣式,其中進度條的背景為灰色,而進度條前景的顏色為藍色,整個設計很直觀,一眼就能看清目前的進度情況。
總的來說,Javafx提供的CSS樣式十分美觀,并且非常容易使用。開發者可以根據自身需求進行選擇,以使界面更加美觀和易于操作。
上一篇css好看的表格教程圖
下一篇css如何使背景圖片固定