Qt 之 stylesheet 用法, QSS实例

最新推荐文章于 2025-07-13 12:35:33 发布

mingxinke

最新推荐文章于 2025-07-13 12:35:33 发布

阅读量1.1k

点赞数

分类专栏： QT

QT 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了信息技术领域的多个方面，包括前端开发、后端开发、移动开发等细分技术领域，涉及HTML、CSS、JavaScript等核心技能，以及大数据开发、嵌入式硬件等前沿技术。文章还覆盖了开发工具、测试、基础运维等多个实用主题，旨在为读者提供全面的技术指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

规则见帮助文档

背景图片九宫格
border-width: 5px;
border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch;

border-width必须要加上，用border-image来自动根据大小扩展，而不用background-image

字体颜色
color: white;

按钮3种状态：正常，鼠标置上，按下
QPushButton
QPushButton:hover
QPushButton:checked
对于checked，要把QPushButton设置为可checkable。(setCheckable(true))

实例： http://blog.youkuaiyun.com/xuhongtao123459/archive/2010/09/10/5875614.aspx

01.* {

02. font-size:13px;

03. color:white;

04. font-family:"宋体";

05.}

06.CallWidget QLineEdit#telEdt

07. {

08. font-size:24px;

09.}

10.QMainWindow,QDialog {

11. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

12. stop: 0 #1B2534, stop: 0.4 #010101,

13. stop: 0.5 #000101, stop: 1.0 #1F2B3C);

14.}

15.QWidget {

16. background:#121922;

17.}

18.QLabel {

19. background:transparent;

20.}

21.DailForm QLineEdit#phoneLineEdt {

22. font-size:36px;

23. font-weight: bold;

24.}

25.QPushButton,QToolButton {

26. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

27. stop: 0 #5B5F5F, stop: 0.5 #0C2436,

28. stop: 1.0 #27405A);

29. border-style: outset;

30. border-width: 1px;

31. border-radius: 5px;

32. border-color: #11223F;

33. padding: 1px;

34.}

35.QPushButton::hover,QToolButton::hover {

36. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

37. stop: 0 #758385, stop: 0.5 #122C39,

38. stop: 1.0 #0E7788);

39. border-color: #11505C;

40.}

41.QPushButton::pressed,QToolButton::pressed {

42. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

43. stop: 0 #969B9C, stop: 0.5 #16354B,

44. stop: 1.0 #244F76);

45. border-color: #11505C;

46.}

47.QPushButton::disabled,QToolButton::disabled {

48. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

49. stop: 0 #282B2C, stop: 0.5 #09121A,

50. stop: 1.0 #111D29);

51. border-color: #0A1320;

52. color:#6A6864;

53.}

54.QDialog QPushButton,QDialog QToolButton {

55. min-width:30px;

56. min-height:23px;

57.}

58.QToolButton[objectName="minimizeToolBtn"] {

59. background: transparent;

60. border:none;

61. image:url(qss/minimize.png)

62.}

63.QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed {

64. image:url(qss/minimize_hover.png)

65.}

66.QToolButton[objectName="maximizeToolBtn"] {

67. background: transparent;

68. border:none;

69. image:url(qss/maximize.png)

70.}

71.QToolButton[objectName="maximizeToolBtn"]:hover,QToolButton[objectName="maximizeToolBtn"]:pressed {

72. image:url(qss/maximize_hover.png)

73.}

74.QToolButton[objectName="closeToolBtn"],QToolButton[objectName="customCloseWindow"] {

75. background: transparent;

76. border:none;

77. image:url(qss/close.png)

78.}

79.QToolButton[objectName="closeToolBtn"]:hover,QToolButton[objectName="closeToolBtn"]:pressed {

80. image:url(qss/close_hover.png)

81.}

82.QToolButton[objectName="customCloseWindow"]:hover,QToolButton[objectName="customCloseWindow"]:pressed {

83. image:url(qss/close_hover.png)

84.}

85.QToolButton[objectName="titleSetUpToolBtn"] {

86. background: transparent;

87. border:none;

88. image:url(qss/setup.png)

89.}

90.DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,

91. QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,

92. QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,

93. QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn {

94. font-size:36px;

95. border-radius: 10px;

96.}

97.DailForm QToolButton#delToolBtn {

98. border-radius: 10px;

99.}

100.QFrame {

101. border-color:#32435E;

102. border-width:1px;

103. border-radius: 3px;

104.}

105.QLineEdit,QTextEdit {

106. border: 1px solid #32435E;

107. border-radius: 3px;

108. /* padding: 0 8px; */

109. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

110. stop: 0 #080B10,

111. stop: 1.0 #212C3F);

112. selection-background-color: #0A246A;

113.}

114.QLineEdit::hover {

115. border-color:#5D8B9E;

116.}

117.QLineEdit[echoMode="3"] {

118. lineedit-password-character: 9679;

119.}

120.#QLineEdit:read-only {

121. background: #543F7C;

122.}

123.QTabWidget::pane { /* The tab widget frame */

124. border: 0px solid #32435E;

125. position: absolute;

126. left: -0.1em;

127.}

128.QTabWidget#MainTabWidget::tab-bar {

129. left: -3px; /* move to the right by 5px */

130.}

131.QTabWidget#MainTabWidget QTabBar::tab {

132. height: 14ex;

133. width: 14ex;

134.}

135.QTabBar::tab {

136. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

137. stop: 0 #292F31, stop: 1 #0C131E);

138.}

139.QTabBar::tab:selected {

140. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

141. stop: 0 #113845, stop: 1.0 #15A8FF);

142.}

143.QTabBar::tab:hover {

144. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

145. stop: 0 #113845, stop: 1.0 #0E6F80);

146.}

147.#QTabBar::tab:selected {

148. border-color: #32435E;

149. border-right-color: #32435E; /* same as pane color */

150.}

151.#QTabBar::tab:!selected {

152. margin-left: 2px; /* make non-selected tabs look smaller */

153.}

154.#QTabBar:tab:first:selected {

155. margin-top: 0;

156.}

157.QTabBar:tab:last:selected {

158. margin-right: 0;

159.}

160.QTabBar:tab:only-one {

161. margin: 0;

162.}

163.QListWidget {

164. border: 1px solid #32435E;

165. background:#050609;

166.}

167.QListWidget::item:selected {

168. /*border: 0px solid #33CCFF;*/

169. border:none;

170. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

171. stop: 0 #6A848C, stop: 1.0 #0F9EAF);

172. padding:0px;

173. margin:0px;

174.}

175.#QListWidget::item:selected:!active {

176. border-width: 0px ;

177.}

178.#QListWidget::item:selected:active {

179. border-width: 1px;

180.}

181.

182.QComboBox {

183. border: 1px solid #32435E;

184. border-radius: 3px;

185. padding: 1px 18px 1px 3px;

186. min-width: 6em;

187.}

188.QComboBox::hover {

189. border-color:#5D8B9E;

190.}

191.QComboBox:editable {

192. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

193. stop: 0 #080B10,

194. stop: 1.0 #212C3F);

195.}

196.QComboBox:!editable, QComboBox::drop-down:editable {

197. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

198. stop: 0 #080B10,

199. stop: 1.0 #212C3F);

200.}

201. /* QComboBox gets the "on" state when the popup is open */

202.QComboBox:!editable:on, QComboBox::drop-down:editable:on {

203. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

204. stop: 0 #080B10,

205. stop: 1.0 #212C3F);;

206.}

207.QComboBox:on { /* shift the text when the popup opens */

208. padding-top: 3px;

209. padding-left: 4px;

210.}

211.QComboBox::drop-down {

212. subcontrol-origin: padding;

213. subcontrol-position: top right;

214. width: 15px;

215. border-left-width: 1px;

216. border-left-color: 32435E;

217. border-left-style: solid; /* just a single line */

218. border-top-right-radius: 3px; /* same radius as the QComboBox */

219. border-bottom-right-radius: 3px;

220.}

221.QComboBox::down-arrow {

222. image: url(qss/downarrow.png);

223.}

224.QComboBox::down-arrow:on { /* shift the arrow when popup is open */

225. top: 1px;

226. left: 1px;

227.}

228.QComboBox QAbstractItemView {

229. border: 2px solid #32435E;

230. selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

231. stop: 0 #506B79,

232. stop: 1.0 #0D95A6);

233. background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

234. stop: 0 #1B2534, stop: 0.4 #010101,

235. stop: 0.5 #000101, stop: 1.0 #1F2B3C);

236.}

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/xuhongtao123459/archive/2010/09/10/5875614.aspx