Qt QSS常用样式总结

最新推荐文章于 2022-12-28 15:06:19 发布

xqhrs232

最新推荐文章于 2022-12-28 15:06:19 发布

阅读量178

点赞数

分类专栏： X11/Qt/Qt quick/Qml界面技术

原文链接：https://blog.csdn.net/qq_33559992/article/details/85331081?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=1328655.11595.16158856186168503&depth_1-utm_source=distribute.pc_relevant.none-task-blog-

版权

X11/Qt/Qt quick/Qml界面技术专栏收录该内容

327 篇文章 6 订阅

订阅专栏

原文地址::https://blog.csdn.net/qq_33559992/article/details/85331081?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control&dist_request_id=1328655.11595.16158856186168503&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.control

1、Qt 之 QSS（黑色炫酷）----https://waleon.blog.csdn.net/article/details/51992070?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-17.control&dist_request_id=1328656.10626.16158809634885467&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-17.control

2、QT的QSS样式总结----https://blog.csdn.net/qq_40155090/article/details/114177558?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=1328656.11479.16158857970725277&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control

3、Qt QSS样式表总结----https://blog.csdn.net/Stone_OverLooking/article/details/114530091?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

QTabWidget

/****************************************************************************
*           QTabWidget
*       描述：pane 指整个tab组件
*               border-width 组件的外框宽度
*               border-color 外框颜色 border-style外框风格（比如outset就是凸出立体感）
*               border-radius 外框的圆角像素
****************************************************************************/
QTabWidget::pane {
border: none;//无边框
border-top: 3px solid rgb(0, 160, 230);//边款顶部：3px 实线颜色(0,160,230)
background: transparent;//背景透明
}
QTabWidget::tab-bar {//tab-bar
border: none;   //
}
QTabBar::tab {
border: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: rgb(0, 0, 0);
background: rgb(255, 255, 255, 30);
height: 28px;
min-width: 85px;
margin-right: 5px;
padding-left: 5px;
padding-right: 5px;
}
QTabBar::tab:hover {
background: rgb(0, 0, 255, 40);
}
QTabBar::tab:selected {
color: white;
background: rgb(0, 160, 230);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
QSlider

/****************************************************************************
*           QSlider
*       描述：滑动块样式
*           仿网易云样式
****************************************************************************/
/* 一定要先设置groove，不然handle的很多效果将没有*/
QSlider::groove:horizontal {
border: none;
height: 6px;
border-radius: 3px;
background: lightgray;
}
QSlider::handle:horizontal {
border: none;
margin: -5px 0px; /* 上下边距和左右边距*/
width: 16px;
height: 16px;
border-radius: 8px;
background: #e83c3c;
border-image: url(:/images/playPbHandle16_White.png);
}
/*划过部分*/
QSlider::sub-page:horizontal {
background: #e83c3c;
height: 4px;
border-radius: 3px;
}
/*未划过部分*/
QSlider::add-page:horizontal {
background: lightgray;
height: 4px;
border-radius: 3px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/****************************************************************************
*           QSlider
*       描述：滑动块样式
*               horizontal --> 水平滑动槽
****************************************************************************/
QSlider::groove:horizontal {
   border: 1px solid #bbb;
   background: white;
   height: 10px;
   border-radius: 4px;
}

QSlider::sub-page:horizontal {
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #66e, stop: 1 #bbf);
   background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1, stop: 0 #bbf, stop: 1 #55f);
   border: 1px solid #777;
   height: 10px;
   border-radius: 4px;
}

QSlider::add-page:horizontal {
   background: #fff;
   border: 1px solid #777;
   height: 10px;
   border-radius: 4px;
}

QSlider::handle:horizontal {
   background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #eee, stop:1 #ccc);
   border: 1px solid #777;
   width: 13px;
   margin-top: -2px;
   margin-bottom: -2px;
   border-radius: 4px;
}

QSlider::handle:horizontal:hover {
   background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #fff, stop:1 #ddd);
   border: 1px solid #444;
   border-radius: 4px;
}

QSlider::sub-page:horizontal:disabled {
   background: #bbb;
   border-color: #999;
}

QSlider::add-page:horizontal:disabled {
   background: #eee;
   border-color: #999;
}

QSlider::handle:horizontal:disabled {
   background: #eee;
   border: 1px solid #aaa;
   border-radius: 4px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
QTableView

/*QTableView 左上角样式*/
QTableView QTableCornerButton::section {
color: white;/*文字颜色*/
background-color: rgb(41, 139, 201);/*背景色*/
border: 5px solid #418bc9;/*边框*/
border-radius:0px;/*边框圆角*/
border-color: rgb(41, 139, 201);/*边框颜色*/
font: 10px;/*字体大小*/
padding:0px 0 0 0px;/*内边距*/
}

QTableView {
background:transparent;/*背景透明*/
/*color: white; /*表格内文字颜色*/
/* gridline-color: black; /*表格内框颜色*/
/*background-color: rgb(108, 108, 108); /*表格内背景色*//*
/*alternate-background-color: rgb(64, 64, 64);
/*selection-color: white; /*选中区域的文字颜色*/
/* selection-background-color: rgb(77, 77, 77); /*选中区域的背景色*/
/* border: 2px groove gray;
/*border-radius: 0px;
/*padding: 2px 4px;*/
}

QHeaderView {
color: white;
font: bold 10pt;
background-color: rgb(41, 139, 201);
border: 0px solid rgb(144, 144, 144);
border:0px solid rgb(191,191,191);
border-left-color: rgba(255, 255, 255, 0);
border-top-color: rgba(255, 255, 255, 0);
border-radius:0px;
min-height:29px;
}

QHeaderView::section {
color: white;
background-color:rgb(41, 139, 201);
border: 5px solid #f6f7fa;
border-radius:0px;
border-color:rgb(41, 139, 201);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
QListWidget / QListView

/************* 左侧管理工具栏 ***************/
QWidget#mangeWidget, #listItemWidget, #musicMangeScrollAreaWidget {
background-color: #f5f5f7;
}
QListWidget#musicMangeListWidget {
border: none;
outline: none;
background-color: #f5f5f7;
}
QListWidget#musicMangeListWidget::item {
background-color: #f5f5f7;
border: solid
}
QListWidget#musicMangeListWidget::item:hover {
background-color: #f5f5f7;
}
QListWidget#musicMangeListWidget::item:selected {
background-color: #e6e7ea;
border-left-width: 4px;
border-left-color: #c62f2f;
}
QLabel#boxTitleLabel, #toolboxNameLabel {
color: #696969;
font-family: "Microsoft Yahei";
font-size: 9pt;
background-color: #f5f5f7;
}
QScrollArea#musicMangeScrollArea {
border: 0px solid;
border-right-width: 1px;
border-right-color: #dcdbdc;
background-color: #f5f5f7;
}
QScrollBar:vertical {
border: none;
background: #f5f5f7;
width: 10px;
margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
background: Gainsboro;
min-height: 20px;
border-radius: 5px;
border: none;
}
QScrollBar::add-line:vertical {
border: 0px solid grey;
background: #32CC99;
height: 0px;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
border: 0px solid grey;
background: #32CC99;
height: 0px;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
background: none;
width: 0px;
height: 0px;
}
QPushButton#playListTitleButton, #openListButton,
#createPLayListButton {
border: none;
}
QPushButton#playListTitleButton {
text-align : left;
color: #696969;
font-family: "Microsoft Yahei";
font-size: 9pt;
background-color: #f5f5f7;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
QPushButton

红色悬停样式表1
/* Red Button */
QPushButton#RedButton {
border-radius: 8px;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
background-color: white;
color: black;
border: 2px solid #f44336;
}

QPushButton#RedButton:hover {
background-color: #f44336;
color: white;
}

QPushButton#RedButton:pressed {
background-color: #06AD56;
}

红色悬停样式表2
/* Red Button 2 */
QPushButton#RedButton2 {
background-color: #f44336;
border-radius: 8px;
padding: 16px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
color: white;
}

QPushButton#RedButton2:hover {
background-color: white;
border: 2px solid #f44336;
color: black
}

QPushButton#RedButton2:pressed {
background-color: #06AD56;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
QCheckBox

QCheckBox{
   color:#414347;
}
QCheckBox::indicator {
   width:16px;
   height:16px;
   border:1px solid #000000;
}
QCheckBox::indicator:disabled {
   width:16px;
   height:16px;
   border:1px solid #808080;
}
QCheckBox::indicator:checked {
   image:url(:/image/unchecked.png);
}

QCheckBox::indicator:checked:disabled{
image:url(:/image/unchecked-dis.png);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
QProgressbar

QProgressBar{
   font:9pt;
   border-radius:5px;
   text-align:center;
   border:1px solid #E8EDF2;
   background-color: rgb(255, 255, 255);
   border-color: rgb(180, 180, 180);
}
QProgressBar:chunk{
   border-radius:5px;
   background-color:#1ABC9C;
}
1
2
3
4
5
6
7
8
9
10
11
12