Qt 使用QSS对horizontalSlider进行样式设置

 1 QSlider
 2 {
 3     background-color: #363636; 
 4     border-style: outset; 
 5     border-radius: 10px; 
 6 }
 7  
 8 QSlider::groove:horizontal
 9 {
10     height: 12px;
11     background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
12     margin: 2px 0
13 }
14  
15 QSlider::handle:horizontal 
16 {
17     background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);
18     width: 16px;
19     height: 16px;
20     margin: -5px 6px -5px 6px;
21     border-radius:11px; 
22     border: 3px solid #ffffff;
23 }

 1 QSlider 
 2 {
 3     background-color: rgba(22, 22, 22, 0.7);
 4     padding-top: 15px;  /*上面端点离顶部的距离*/
 5     padding-bottom: 15px;
 6     border-radius: 5px; /*外边框矩形倒角*/
 7 }
 8  
 9 QSlider::add-page:vertical 
10 {
11     background-color: #FF7826;
12     width:5px;
13     border-radius: 2px;
14 }
15  
16 QSlider::sub-page:vertical 
17 {
18     background-color: #7A7B79;
19     width:5px;
20     border-radius: 2px;
21 }
22  
23 QSlider::groove:vertical 
24 {
25     background:transparent;
26     width:6px;
27 }
28  
29 QSlider::handle:vertical    
30 {
31     height: 14px;  
32     width: 14px;
33     margin: 0px -4px 0px -4px;
34     border-radius: 7px;
35     background: white;
36 }

 1 #horizontalSlider::groove:horizontal {
 2 border: 1px solid gray;
 3 border-radius:2px;
 4 height: 4px;
 5 left: 12px; right: 12px;
 6 }
 7 
 8 /*滑条*/
 9 #horizontalSlider::handle:horizontal {
10 border: 1px solid gray;
11 border-image:url(":/image/images/b.png");
12 width: 20;
13 margin: -5px -5px -5px -5px;
14 }
15 
16 /*已经划过的*/
17 #horizontalSlider::sub-page:horizontal{
18 background: #D1CE21;
19 }

 1 QSlider::groove:horizontal {  
 2 border: 1px solid #bbb;  
 3 background: white;  
 4 height: 10px;  
 5 border-radius: 4px;  
 6 }  
 7   
 8 QSlider::sub-page:horizontal {  
 9 background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,  
10     stop: 0 #bbf, stop: 1 #55f);  
11 border: 1px solid #777;  
12 height: 10px;  
13 border-radius: 4px;  
14 }  
15   
16 QSlider::add-page:horizontal {  
17 background: #fff;  
18 border: 1px solid #777;  
19 height: 10px;  
20 border-radius: 4px;  
21 }  
22   
23 QSlider::handle:horizontal {  
24 background: qlineargradient(x1:0, y1:0, x2:1, y2:1,  
25     stop:0 #eee, stop:1 #ccc);  
26 border: 1px solid #777;  
27 width: 13px;  
28 margin-top: -2px;  
29 margin-bottom: -2px;  
30 border-radius: 4px;  
31 }  
32   
33 QSlider::handle:horizontal:hover {  
34 background: qlineargradient(x1:0, y1:0, x2:1, y2:1,  
35     stop:0 #fff, stop:1 #ddd);  
36 border: 1px solid #444;  
37 border-radius: 4px;  
38 }  
39   
40 QSlider::sub-page:horizontal:disabled {  
41 background: #bbb;  
42 border-color: #999;  
43 }  
44   
45 QSlider::add-page:horizontal:disabled {  
46 background: #eee;  
47 border-color: #999;  
48 }  
49   
50 QSlider::handle:horizontal:disabled {  
51 background: #eee;  
52 border: 1px solid #aaa;  
53 border-radius: 4px;  
54 }  

 1 /* 一定要先设置groove，不然handle的很多效果将没有*/
 2 QString sliderstyle = QString("QSlider::groove:horizontal{border:none; height:12px; border-radius:6px; background:rgba(0, 19, 39, 100);}"
 3                               /* 上下边距和左右边距*/
 4                               "QSlider::handle:horizontal{border:none; margin:-5px 0px; width:22px; height:22px; border-radius:20px;"
 5                                                          "border-image:url(:/new/prefix1/64.png);}"
 6                              /*划过部分*/
 7                              "QSlider::sub-page:horizontal{background:rgba(0, 19, 39, 100); border-radius:6px;}"
 8                              /*未划过部分*/
 9                              "QSlider::add-page:horizontal{background:rgba(0, 19, 39, 100); border-radius:6px;}");
10         ui->horizontalSlider->setStyleSheet(sliderstyle);

1     "QSlider::groove:horizontal{border:none; height:73px; border-radius:6px; border-image:url(:/new/prefix1/b1.png);}"
2     /* 上下边距和左右边距*/
3     "QSlider::handle:horizontal{border:none; margin:20px 0px; width:22px; height:22px; border-radius:20px;"
4                                "border-image:url(:/new/prefix1/ZZ64.png);}"
5     /*划过部分*/
6     "QSlider::sub-page:horizontal{background:rgba(0, 19, 39, 0); border-radius:6px;}"
7     /*未划过部分*/
8     "QSlider::add-page:horizontal{background:rgba(0, 19, 39, 0); border-radius:6px;}"
9     );