首页 > 技术文章 > Qss 样式表的尝试

tyche116 2018-03-08 13:49 原文

 

 

  1   1 QLineEdit{
  2   2     border:1px solid #137eb6;
  3   3     padding:2px;
  4   4     background-color:#F5F5F5;
  5   5 }
  6   6 
  7   7 QToolTip{
  8   8     border:1px solid #1d60ba;
  9   9     background-color:#deeefa;
 10  10     border-radius:4px;
 11  11     color:dark;
 12  12     padding:1px;
 13  13 }
 14  14 
 15  15 QGroupBox{
 16  16     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
 17  17     stop:0#F2F2F2, stop: 1 #FFFFFF);
 18  18     border:2px solid #15922e;
 19  19     border-radius:5px;
 20  20     margin-top:10px;/* leave space at the top for the title */
 21  21 }
 22  22 
 23  23 QGroupBox::title {
 24  24     subcontrol-origin: margin;
 25  25     subcontrol-position: top center;/* position at the top center */
 26  26     padding:03px;
 27  27     border-radius:2px;
 28  28     background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
 29  29     stop:0#DDDDDD, stop: 1 #FFFFFF);
 30  30 }
 31  31 
 32  32 QSplitter::handle:horizontal {
 33  33     /*image: url(images/splitter.png);*/
 34  34     background-color: #1c77ab;
 35  35 }
 36  36 
 37  37 QSplitter::handle:vertical {
 38  38     /*image: url(images/splitter.png);*/
 39  39     background-color: #1c77ab;
 40  40 }
 41  41 
 42  42 /*
 43  43 QSplitter::handle:horizontal {
 44  44     height: 10px;
 45  45 }
 46  46 
 47  47 QSplitter::handle:vertical {
 48  48     width: 10px;
 49  49 }*/
 50  50 
 51  51 
 52  52 QPushButton{
 53  53     border: 1px solid #1c77ab;
 54  54     border-radius:2px;
 55  55     padding:2px 8px 2px 8px;
 56  56 /*    border-width:10px;
 57  57     min-height: 32px;*/
 58  58     min-width:  64px;
 59  59 }
 60  60 QPushButton:hover{
 61  61     background-color:#a2e4fc;
 62  62 }
 63  63 QPushButton:pressed{
 64  64     background-color:#a2e4fc;
 65  65 }
 66  66 
 67  67 /*
 68  68 QComboBox {
 69  69     border:1px solid #d7d7d7;
 70  70     border-radius: 3px;
 71  71     padding: 1px 18px 1px 3px;
 72  72 }
 73  73 
 74  74 QComboBox:editable{
 75  75     background: white;
 76  76 }
 77  77 QComboBox:!editable{
 78  78     background: #fbfbfb; color:#15922e
 79  79 }
 80  80 QComboBox::drop-down{
 81  81     subcontrol-origin: padding;
 82  82     subcontrol-position: top right;
 83  83     width: 22px;
 84  84     border-left-width: 1px;
 85  85     border-left-color: #c9c9c9;
 86  86     border-left-style: solid;
 87  87     border-top-right-radius: 3px;
 88  88     border-bottom-right-radius: 3px;
 89  89 }
 90  90 
 91  91 QComboBox::down-arrow{
 92  92     image: url(:/images/down.png);
 93  93 }
 94  94 
 95  95 QComboBox::down-arrow:on {
 96  96     top: 1px;
 97  97     left: 1px;
 98  98 }
 99  99 QComboBox QAbstractItemView::item{
100 100     max-width: 50px;
101 101     min-height: 20px
102 102 }
103 103 */
104 104 
105 105 QRadioButton::indicator {
106 106 width:13px;
107 107 height:13px;
108 108 }
109 109 
110 110 QRadioButton::indicator::unchecked{
111 111 image: url(:/images/radio-button_off-0.png);
112 112 }
113 113 
114 114 QRadioButton::indicator:unchecked:hover {
115 115 image: url(:/images/radio-button_off-1.png);
116 116 }
117 117 
118 118 QRadioButton::indicator:unchecked:pressed {
119 119 image: url(:/images/radio-button_off-2.png);
120 120 }
121 121 
122 122 QRadioButton::indicator::checked{
123 123 image: url(:/images/radio-button_on-0.png);
124 124 }
125 125 
126 126 QRadioButton::indicator:checked:hover {
127 127 image: url(:/images/radio-button_on-1.png);
128 128 }
129 129 
130 130 QRadioButton::indicator:checked:pressed {
131 131 image: url(:/images/radio-button_on-2.png);
132 132 }
133 133 
134 134 
135 135 QTabWidget::pane{
136 136     border-width: 6 7 7 7;
137 137     border-image: url(:/images/pane.png) 6 7 7 7 stretch stretch;
138 138 }
139 139 QTabWidget::tab-bar{
140 140     left: 10px;  /* 向右移left个像素*/
141 141     top: 6px;    /* 向下移top个像素,调整top使tab下边框与pane上边框对齐*/
142 142 }
143 143 QTabBar::tab{
144 144     border-width: 7 22 6 7; /* t r b l */
145 145     border-image: url(:/images/tab_unsel.png) 7 22 6 7 stretch stretch;
146 146     color: rgb(255, 255, 255);
147 147     min-width: 48px;
148 148     min-height: 15px;
149 149     max-height: 15px;
150 150     padding: 0px;
151 151 }
152 152 
153 153 QTabBar::tab:hover{
154 154     border-image: url(:/images/tab_hover.png) 7 22 6 7 stretch stretch;
155 155 }
156 156 QTabBar::tab:selected{
157 157     color: rgb(0, 0, 0);
158 158     border-image: url(:/images/tab_sel.png) 7 22 6 7 stretch stretch;
159 159 }
160 160 
161 161 QTabBar::tab:disabled{
162 162     color: rgb(200, 200, 200);
163 163     border-image: url(:/images/tab_disable.png) 7 22 6 7 stretch stretch;
164 164 }
165 165 
166 166 
167 167 QScrollBar:vertical
168 168 {
169 169     width:12px;
170 170     background:rgba(0,0,0,0%);
171 171     margin:0px,0px,0px,0px;
172 172     padding-top:12px;
173 173     padding-bottom:12px;
174 174 }
175 175 QScrollBar::handle:vertical
176 176 {
177 177     width:12px;
178 178     background:rgba(0,0,0,25%);
179 179     border-radius:5px;
180 180     min-height:20;
181 181 }
182 182 QScrollBar::handle:vertical:hover
183 183 {
184 184     width:12px;
185 185     background:rgba(0,0,0,50%);
186 186     border-radius:5px;
187 187     min-height:20;
188 188 }
189 189 QScrollBar::handle:vertical:pressed
190 190 {
191 191     width:12px;
192 192     background:rgba(0,0,0,80%);
193 193     border-radius:5px;
194 194     min-height:20;
195 195 }
196 196 QScrollBar::add-line:vertical
197 197 {
198 198     height:12px;width:12px;
199 199     border-image:url(:/images/down_arrow-0.png);
200 200     subcontrol-position:bottom;
201 201 }
202 202 
203 203 QScrollBar::add-line:vertical:hover
204 204 {
205 205     height:12px;width:12px;
206 206     border-image:url(:/images/down_arrow-1.png);
207 207     subcontrol-position:bottom;
208 208 }
209 209 QScrollBar::add-line:vertical:pressed
210 210 {
211 211     height:12px;width:12px;
212 212     border-image:url(:/images/down_arrow-2.png);
213 213     subcontrol-position:bottom;
214 214 }
215 215 QScrollBar::sub-line:vertical
216 216 {
217 217     height:12px;width:12px;
218 218     border-image:url(:/images/up_arrow-0.png);
219 219     subcontrol-position:top;
220 220 }
221 221 QScrollBar::sub-line:vertical:hover
222 222 {
223 223     height:12px;width:12px;
224 224     border-image:url(:/images/up_arrow-1.png);
225 225     subcontrol-position:top;
226 226 }
227 227 QScrollBar::sub-line:vertical:pressed
228 228 {
229 229     height:12px;width:12px;
230 230     border-image:url(:/images/up_arrow-2.png);
231 231     subcontrol-position:top;
232 232 }
233 233 
234 234 QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical
235 235 {
236 236     background:rgba(0,0,0,10%);
237 237 /*    border-radius:5px;  */
238 238 }
239 239 
240 240 
241 241 QScrollBar:horizontal
242 242 {
243 243     height:12px;
244 244     background:rgba(0,0,0,0%);
245 245     margin:0px,0px,0px,0px;
246 246     padding-left:12px;
247 247     padding-right:12px;
248 248 }
249 249 QScrollBar::handle:horizontal
250 250 {
251 251     height:12px;
252 252     background:rgba(0,0,0,25%);
253 253     border-radius:5px;
254 254     min-width:20;
255 255 }
256 256 QScrollBar::handle:horizontal:hover
257 257 {
258 258     height:12px;
259 259     background:rgba(0,0,0,50%);
260 260     border-radius:5px;
261 261     min-width:20;
262 262 }
263 263 QScrollBar::handle:horizontal:pressed
264 264 {
265 265     height:12px;
266 266     background:rgba(0,0,0,80%);
267 267     border-radius:5px;
268 268     min-width:20;
269 269 }
270 270 
271 271 QScrollBar::add-line:horizontal
272 272 {
273 273     height:12px;width:12px;
274 274     border-image:url(:/images/right_arrow-0.png);
275 275     subcontrol-position:right;
276 276 }
277 277 QScrollBar::add-line:horizontal:hover
278 278 {
279 279     height:12px;width:12px;
280 280     border-image:url(:/images/right_arrow-1.png);
281 281     subcontrol-position:right;
282 282 }
283 283 QScrollBar::add-line:horizontal:pressed
284 284 {
285 285     height:12px;width:12px;
286 286     border-image:url(:/images/right_arrow-2.png);
287 287     subcontrol-position:right;
288 288 }
289 289 
290 290 QScrollBar::sub-line:horizontal
291 291 {
292 292     height:12px;width:12px;
293 293     border-image:url(:/images/left_arrow-0.png);
294 294     subcontrol-position:left;
295 295 }
296 296 QScrollBar::sub-line:horizontal:hover
297 297 {
298 298     height:12px;width:12px;
299 299     border-image:url(:/images/left_arrow-1.png);
300 300     subcontrol-position:left;
301 301 }
302 302 QScrollBar::sub-line:horizontal:pressed
303 303 {
304 304     height:12px;width:12px;
305 305     border-image:url(:/images/left_arrow-2.png);
306 306     subcontrol-position:left;
307 307 }
308 308 QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal
309 309 {
310 310     background:rgba(0,0,0,10%);
311 311     border-radius:5px;
312 312 }
313 313 
314 314 QMenu{
315 315 background-color:#dfe0e0;
316 316 border:2px solid black;
317 317 }
318 318 
319 319 QMenu::item {
320 320 background-color: transparent;
321 321 }
322 322 
323 323 QMenu::item:selected {
324 324 background-color:#38a2fb;
325 325 }
326 326 
327 327 QMenu::separator {
328 328 height:1px;
329 329 background: #62a8f7;
330 330 margin-left:10px;
331 331 margin-right:5px;
332 332 }
333 333 
334 334 QCheckBox{
335 335 spacing:8px;
336 336 }
337 337 
338 338 QCheckBox::indicator {
339 339 width:16px;
340 340 height:16px;
341 341 }
342 342 
343 343 QCheckBox::indicator:unchecked{
344 344 image: url(:/images/uncheck_box-1.png);
345 345 }
346 346 
347 347 QCheckBox::indicator:unchecked:hover {
348 348 image: url(:/images/uncheck_box-2.png);
349 349 }
350 350 
351 351 QCheckBox::indicator:unchecked:pressed {
352 352 image: url(:/images/uncheck_box-2.png);
353 353 }
354 354 
355 355 QCheckBox::indicator:checked{
356 356 image: url(:/images/checked_box-1.png);
357 357 }
358 358 
359 359 QCheckBox::indicator:checked:hover {
360 360 image: url(:/images/checked_box-2.png);
361 361 }
362 362 
363 363 QCheckBox::indicator:checked:pressed {
364 364 image: url(:/images/checked_box-2.png);
365 365 }
366 366 
367 367 QHeaderView::section{
368 368     background-color:#55bedc;
369 369     border:1px solid #d0d0d0;
370 370 }
371 371 
372 372 QTableView,QTableWidget{
373 373     border:1px solid #7e7d7d;
374 374     gridline-color:#44c030;
375 375     background-color: rgb(255, 255, 245);
376 376     alternate-background-color: rgb(245, 245, 245);
377 377     selection-background-color: #6d95ee;
378 378 }
379 379 
380 380 QTableView::item:hover {
381 381     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#e7effd, stop: 1 #cbdaf1);
382 382     border:1px solid #bfcde4;
383 383 }
384 384 
385 385 QTableWidget::item:hover {
386 386     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#e7effd, stop: 1 #cbdaf1);
387 387     border:1px solid #bfcde4;
388 388 }
389 389 
390 390 
391 391 QTreeView{
392 392     background-color: #FFFFFF;
393 393     alternate-background-color: #f6f6f6;
394 394 }
395 395 
396 396 /*
397 397 QTreeView::item {
398 398 
399 399     background: #5B677A;
400 400     background: transparent;
401 401     margin:5px;
402 402     border: 1px solid #FFFFFF;
403 403 
404 404     border:1px solid #d9d9d9;
405 405     border-top-color: transparent;
406 406     border-bottom-color: transparent;
407 407     background:white;
408 408 }*/
409 409 
410 410 QTreeView::item:hover {
411 411     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#e7effd, stop: 1 #cbdaf1);
412 412     border:1px solid #bfcde4;
413 413 }
414 414 
415 415 QTreeView::item:selected {
416 416     border:1px solid #49ce58;
417 417     color:#000000;
418 418 }
419 419 
420 420 QTreeView::item:selected:active{
421 421     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#6ea1f1, stop: 1 #5e8edf);
422 422 }
423 423 
424 424 QTreeView::item:selected:!active {
425 425     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#6b9be8, stop: 1 #6c98da);
426 426 }
427 427 
428 428 
429 429 QTreeView::branch{
430 430     background:white;
431 431 }
432 432 
433 433 
434 434 QTreeView::branch:has-siblings:!adjoins-item {
435 435 border-image: url(:/images/vline.png);
436 436 }
437 437 
438 438 QTreeView::branch:has-siblings:adjoins-item {
439 439 border-image: url(:/images/branch-more.png);
440 440 }
441 441 
442 442 QTreeView::branch:!has-children:!has-siblings:adjoins-item {
443 443 border-image: url(:/images/branch-end.png);
444 444 }
445 445 
446 446 QTreeView::branch:has-children:!has-siblings:closed,
447 447 QTreeView::branch:closed:has-children:has-siblings {
448 448 border-image: none;
449 449 image: url(:/images/expand_16px.png);
450 450 }
451 451 
452 452 QTreeView::branch:open:has-children:!has-siblings,
453 453 QTreeView::branch:open:has-children:has-siblings {
454 454 border-image: none;
455 455 image: url(:/images/collapse_16px.png);
456 456 }
457 457 
458 458 
459 459 QTreeWidget{
460 460     background-color: #FFFFFF;
461 461     alternate-background-color: #F6F6F6;
462 462 
463 463 }
464 464 
465 465 /*
466 466 QTreeWidget::item {
467 467 
468 468     margin:5px;
469 469     border: 1px solid lightgray;
470 470     background: #5B677A;
471 471     background: transparent;
472 472 
473 473     border:1px solid #d9d9d9;
474 474     border-top-color: transparent;
475 475     border-bottom-color: transparent;
476 476     background:white;
477 477 }
478 478 */
479 479 
480 480 QTreeWidget::item:hover {
481 481     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#e7effd, stop: 1 #cbdaf1);
482 482     border:1px solid #bfcde4;
483 483 }
484 484 
485 485 QTreeWidget::item:selected {
486 486     border:1px solid #49ce58;
487 487     color:#000000;
488 488 }
489 489 
490 490 QTreeWidget::item:selected:active{
491 491     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#6ea1f1, stop: 1 #5e8edf);
492 492 }
493 493 
494 494 QTreeWidget::item:selected:!active {
495 495     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0#6b9be8, stop: 1 #6c98da);
496 496 }
497 497 
498 498 QTreeWidget::branch{
499 499     background:white;
500 500 }
501 501 
502 502 
503 503 QTreeWidget::branch:has-siblings:!adjoins-item {
504 504 border-image: url(:/images/vline.png);
505 505 }
506 506 
507 507 QTreeWidget::branch:has-siblings:adjoins-item {
508 508 border-image: url(:/images/branch-more.png);
509 509 }
510 510 
511 511 QTreeWidget::branch:!has-children:!has-siblings:adjoins-item {
512 512 border-image: url(:/images/branch-end.png);
513 513 }
514 514 
515 515 QTreeWidget::branch:has-children:!has-siblings:closed,
516 516 QTreeWidget::branch:closed:has-children:has-siblings {
517 517 border-image: none;
518 518 image: url(:/images/expand_16px.png);
519 519 }
520 520 
521 521 QTreeWidget::branch:open:has-children:!has-siblings,
522 522 QTreeWidget::branch:open:has-children:has-siblings {
523 523 border-image: none;
524 524 image: url(:/images/collapse_16px.png);
525 525 }
526 526 
527 527 
528 528 QProgressBar {
529 529     border: 1px solid grey;
530 530     border-radius: 5px;
531 531     text-align: center;
532 532     color: #000000;
533 533 
534 534 }
535 535 
536 536 QProgressBar::chunk{
537 537     background-color: #10dc3b;
538 538     width: 5px;
539 539     margin: 0.5px;
540 540 }

 

推荐阅读