Qt样式表(QSS)Demo：黑色扁平加渐变

其他 2019-01-07 00:27:47 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gongjianbo1992/article/details/85638480

（2019-1-3改进）

把上次的纯色背景加了点渐变，感觉好看了点。

关于颜色显示：有些电脑显示器设置偏亮/暗，可以调节下。

关于控件大小：标题高度30像素，控件高度28px。

关于字体大小：一般设置为15px的宋体，没有考虑分辨率问题。

关于图标：阿里图标https://www.iconfont.cn/

本例百度云连接：https://pan.baidu.com/s/1ALvI7FStr9YIx942QQTv1Q

提取码：0q96

效果图：

page1

page2

QSS代码：

*{
font:15px "宋体";
color: rgb(230, 230, 230);
selection-background-color: rgb(255, 255, 255);/*选中文本*/
selection-color: rgb(0, 0, 0);
outline:none;/*焦点框*/
}
#centralWidget{
background-color: rgb(80, 80, 80);
border-bottom:5px solid rgb(20, 20, 20);
}
/*其他(控件公共样式在最后)*/

/*tab 1中按钮示例*/
#btnHoverOrange{
border-color:rgb(255, 170, 0);
}
#btnPressOrange{
color:black;
border-color: rgb(128, 128, 128);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(255, 177, 21, 255), stop:0.528409 rgba(236, 157, 0, 255), stop:1 rgba(255, 170, 0, 255));
}
#btnHoverBlue{
border-color:rgb(0, 170, 255);
}
#btnPressBlue{
color:black;
border-color: rgb(128, 128, 128);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(0, 170, 255, 255), stop:0.511364 rgba(0, 151, 227, 255), stop:1 rgba(0, 170, 255, 255));
}
/*tab 1中勾选框示例*/
#checkHoverOrange{
color: rgb(255, 170, 0);
}
#checkHoverOrange::indicator{
border-image: url(:/img/check_orange.png);
}
#checkCheckOrange::indicator{
border-image: url(:/img/checked_orange.png);
}
#checkHoverBlue{
color: rgb(0, 170, 255);
}
#checkHoverBlue::indicator{
border-image: url(:/img/check_blue.png);
}
#checkCheckBlue::indicator{
border-image: url(:/img/checked_blue.png);
}
#checkHoverGreen{
color: rgb(0, 255, 170);
}
#checkHoverGreen::indicator{
border-image: url(:/img/check_green.png);
}
#checkCheckGreen::indicator{
border-image: url(:/img/checked_green.png);
}
/*tab1 下拉框示例*/
#comboHover{
border:1px solid rgb(255, 170, 0);
}
#comboHover::down-arrow{
border-image: url(:/img/down_orange.png);
}
/*tab 1编辑框示例*/
#editHover{
border:1px solid rgb(255, 170, 0);
}
/*tab 1数字框示例*/
#spinHoverOrange{
border:1px solid rgb(255, 170, 0);
}
#spinHoverOrange::up-button{
border-image: url(:/img/up_orange.png);
}
#spinHoverBlue{
border:1px solid rgb(0, 170, 255);
}
#spinHoverBlue::up-button{
border-image: url(:/img/up_blue.png);
}
/*自定义按钮栏*/
#toolBar{	
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(57, 57, 57, 255), stop:0.534091 rgba(20, 20, 20, 255), stop:1 rgba(73, 73, 73, 255));
border-bottom:2px solid rgb(0, 170, 255);
}
#toolBar QPushButton{	
color: rgb(200, 200, 200);
border:0;
border-radius:0;
background-color: transparent;
}
#toolBar QPushButton:hover{		
color:rgb(255, 170, 0);
background-color: rgba(255, 255, 255, 50);
}
#toolBar QPushButton:pressed{		
background-color: rgba(255, 255, 255, 80);
}
QPushButton#btnSet{
background-image: url(:/img/set_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnSet:hover{
background-image: url(:/img/set_orange.png);
}
QPushButton#btnMin{
background-image: url(:/img/min_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnMin:hover{
background-image: url(:/img/min_orange.png);
}
QPushButton#btnMax{
background-image: url(:/img/max_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnMax:hover{
background-image: url(:/img/max_orange.png);
}
QPushButton#btnMax:checked{
background-image: url(:/img/normal_gray.png);
}
QPushButton#btnMax:checked:hover{
background-image: url(:/img/normal_orange.png);
}
QPushButton#btnClose{
background-image: url(:/img/close_gray.png);
background-repeat:no-repeat;
background-position:center center;
}
QPushButton#btnClose:hover{
background-image: url(:/img/close_red.png);
}
/*分裂器*/
QSplitter::handle{
background-color: rgb(60, 60, 60);
margin:2px;
}
/*滚动区域*/
QScrollArea{
border:0;
background-color: transparent;
}
QScrollArea>QWidget>QWidget{
background-color: rgb(80, 80, 80);
}
/*滚动条 */
QScrollBar:vertical{/*竖向*/
width:20px;
padding:0 3px;
margin:0;
background-color:transparent;
}
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical{
background-color: transparent;
}
QScrollBar::handle:vertical{
width:10px;
min-height:20px;
margin:20px 0;
border-radius:5px;
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(91, 91, 91, 255), stop:0.545455 rgba(107, 107, 107, 255), stop:1 rgba(85, 85, 85, 255));
}
QScrollBar::handle:vertical:hover{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(136, 136, 136, 255), stop:0.545455 rgba(157, 157, 157, 255), stop:1 rgba(139, 139, 139, 255));
}
QScrollBar::add-line:vertical{
height:20px;
width:20px;
subcontrol-position:bottom;
border-image: url(:/img/down2_white.png);
}
QScrollBar::sub-line:vertical{
height:20px;
width:20px;
subcontrol-position:top;
border-image: url(:/img/up2_white.png);
}
QScrollBar::sub-line:vertical:hover{
border-image: url(:/img/up2_orange.png);
}
QScrollBar::add-line:vertical:hover{
border-image: url(:/img/down2_orange.png);
}
QScrollBar:horizontal{/*横向*/
height:20px;
padding:3px;
margin:0;
background-color:transparent;
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal{
background-color: transparent;
}
QScrollBar::handle:horizontal{
height:10px;
min-width:20px;
margin:0 20px;
border-radius:5px;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(91, 91, 91, 255), stop:0.545455 rgba(107, 107, 107, 255), stop:1 rgba(85, 85, 85, 255));
}
QScrollBar::handle:horizontal:hover{
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(136, 136, 136, 255), stop:0.545455 rgba(157, 157, 157, 255), stop:1 rgba(139, 139, 139, 255));
}
QScrollBar::add-line:horizontal{
height:20px;
width:20px;
subcontrol-position:right;
border-image: url(:/img/right2_white.png);
}
QScrollBar::sub-line:horizontal{
height:20px;
width:20px;
subcontrol-position:left;
border-image: url(:/img/left2_white.png);
}
QScrollBar::add-line:horizontal:hover{
border-image: url(:/img/right2_orange.png);
}
QScrollBar::sub-line:horizontal:hover{
border-image: url(:/img/left2_orange.png);
}
/*ToolBox*/
QToolBox{
background-color: rgb(80, 80, 80);/*背景色-空隙颜色*/
border:1px solid rgb(128, 128, 128);
border-top-left-radius:16px 24px;
}
QToolBox>QWidget>QWidget>QWidget{/*tab页*/
background-color: rgb(80, 80, 80);
}
QToolBox>QAbstractButton{/*标题栏*/
min-height:30px;
}
QToolBox::tab{
color: rgb(230, 230, 230);
padding-left:30px;
border-top-left-radius:16px 24px;
border-top:1px solid rgb(128, 128, 128);
border-left:1px solid rgb(128, 128, 128);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(60, 60, 60, 255), stop:0.238636 rgba(40, 40, 40, 255), stop:0.909091 rgba(87, 87, 87, 255));
}
QToolBox::tab:first{
border-top:0;
border-left:0;
}
QToolBox::tab:hover{
color:black;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(255, 177, 21, 255), stop:0.295455 rgba(245, 163, 0, 255), stop:0.909091 rgba(255, 201, 93, 255));
}
QToolBox::tab:selected{
color:rgb(255, 170, 0);
border-bottom:1px solid rgb(0, 170, 255);
}
QToolBox::tab:selected:hover{
color:black;
}
/*TabWidget*/
QTabWidget{
}
QTabWidget>QWidget>QWidget{/*tab页*/
background-color: rgb(80, 80, 80);
}
QTabWidget::tab-bar{
alignment:left;/*tab位置*/
}
QTabWidget::pane { /*内容区域*/
background-color: rgb(80, 80, 80);/*背景色-空隙颜色*/
border:1px solid rgb(128, 128, 128);
} 
QTabBar{
color:white;
background-color:transparent;
}
QTabBar::tab{/*页签*/
min-height:28px;
width:120px;
color: rgb(230, 230, 230);
margin-right:1px;
margin-bottom:1px;
border-top-left-radius:16px 24px;
border:1px solid rgb(128, 128, 128);
border-bottom:0;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(60, 60, 60, 255), stop:0.238636 rgba(40, 40, 40, 255), stop:0.909091 rgba(87, 87, 87, 255));
}
QTabBar::tab:hover{
color:black;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(255, 177, 21, 255), stop:0.295455 rgba(245, 163, 0, 255), stop:0.909091 rgba(255, 201, 93, 255));
}
QTabBar::tab:selected{
color:rgb(255, 170, 0);
border-bottom:1px solid rgb(0, 170, 255);
}
QTabBar::tab:selected:hover{
color:black;
}
QTabBar::tear{/*选项过多时的。。。*/
imag:;
}
QTabBar::scroller{
width:60px;
}
/*文本框*/
QTextEdit{
color:white;
border:1px solid rgb(128, 128, 128);
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:1, stop:0 rgba(90, 90, 90, 255), stop:0.789773 rgba(90, 90, 90, 255), stop:1 rgba(102, 102, 102, 255));
}
/*按钮*/
QPushButton{
color:rgb(240, 240, 240);
border:1px solid rgb(128, 128, 128);
border-radius:3px;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(66, 66, 66, 255), stop:0.517045 rgba(46, 46, 46, 255), stop:1 rgba(69, 69, 69, 255));
}
QPushButton:hover{
border-color:rgb(255, 170, 0);
}
QPushButton:pressed{
border-color: rgb(128, 128, 128);
color:black;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(255, 177, 21, 255), stop:0.528409 rgba(236, 157, 0, 255), stop:1 rgba(255, 170, 0, 255));
}
QPushButton:checked{
color:rgb(0, 255, 170);
border-color: rgba(0, 255, 170, 128);
background-image: url(:/img/right3_green.png);
background-repeat:no-repeat;
background-position:center left;
}
QPushButton:disabled{
color: rgb(230, 230, 230);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(150, 150, 150, 255), stop:0.522727 rgba(134, 134, 134, 255), stop:1 rgba(150, 150, 150, 255));
}
QPushButton:checked:pressed{
color:black;
}
QPushButton:checked:disabled{
color: rgb(230, 230, 230);
border-color: rgb(128, 128, 128);
background-image: url(:/img/right3_white.png);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(150, 150, 150, 255), stop:0.522727 rgba(134, 134, 134, 255), stop:1 rgba(150, 150, 150, 255));
}
/*勾选框*/
QCheckBox{
margin-left:5px;
spacing:3px;/*点击框与文字距离*/
color: rgb(250, 250, 250);
}
QCheckBox:hover{
color: rgb(0, 255, 170);
}
QCheckBox:disabled{
color: rgb(230, 230, 230);
}
QCheckBox::indicator{/*点击框*/
width:20px;
height:20px;
}
QCheckBox::indicator:unchecked{/*可添加未点击时点击区域图片*/
border-image: url(:/img/check_white.png);
}
QCheckBox::indicator:unchecked:hover{
border-image: url(:/img/check_green.png);
}
QCheckBox::indicator:unchecked:disabled{
border-image: url(:/img/check_white.png);
}
QCheckBox::indicator:checked{/*点击时区域样式*/
border-image: url(:/img/checked_green.png);
}
QCheckBox::indicator:checked:hover{
border-image: url(:/img/checked_green.png);
}
QCheckBox::indicator:checked:disabled{
border-image: url(:/img/checked_white.png);
}
QCheckBox::indicator:indeterminate{/*半选中状态*/
}
/*下拉列表*/
QComboBox{
padding-left: 5px;
padding-right: 2px;
color:rgb(250 ,250 ,250);
border:1px solid rgb(128, 128, 128);
background-color:  rgb(100 ,100 ,100);
}
QComboBox:hover{
border:1px solid rgb(255, 170, 0);
}
QComboBox:disabled{
color: rgb(230, 230, 230);
background-color:rgb(150, 150, 150);
}
QComboBox:editable{
background-color:rgb(100, 100, 100);
}
QComboBox:editable:disabled{
background-color:rgb(150, 150, 150);
}
QComboBox QAbstractItemView{
background-color:rgb(110, 110, 110);
}
QComboBox QAbstractItemView::item{/*需要代码中->setView(new QListView(this));*/
height:26px;
font: 15px "宋体";
}
QComboBox QAbstractItemView::item:hover{
color:black;
background-color: rgb(255, 170, 0);
}
QComboBox QAbstractItemView::item:selected{
background-color: rgb(255, 170, 0);
}
QComboBox::drop-down {
width:20px;
height:20px;
subcontrol-position: center right;
right:2px;
border:0;
background-color:transparent;
}
QComboBox::down-arrow {/*替换三角小图标*/
width:20px;
height:20px;
border-image: url(:/img/down_white.png);
}
QComboBox::down-arrow:hover {
border-image: url(:/img/down_orange.png);
}
QComboBox::down-arrow:disabled {
border-image: url(:/img/down2_white.png);
}
/*编辑框*/
QLineEdit{
padding: 0 5px;
color: rgb(250 ,250 ,250);
background-color: rgb(100, 100, 100);
border:1px solid rgb(128, 128, 128);
}
QLineEdit:hover{
border:1px solid rgb(255, 170, 0);
}
QLineEdit[readOnly=true],QLineEdit:disabled{
color: rgb(230, 230, 230);
background-color:rgb(150, 150, 150);
}
/*整数框*/
QSpinBox{
padding:0 5px;
color: rgb(250, 250, 250);
background-color:  rgb(100, 100, 100);
border:1px solid rgb(128, 128, 128);
}
QSpinBox:hover{
border:1px solid rgb(255, 170, 0);
}
QSpinBox:disabled{
color: rgb(230, 230, 230);
background-color:rgb(150, 150, 150);
}
QSpinBox[buttonSymbols="0"]::up-button{/*显示按钮=0*/
width:20px;
height:14px;
subcontrol-origin:border;
subcontrol-position:top right;
right:2px;
top:1px;
border-image: url(:/img/up_white.png);
}
QSpinBox[buttonSymbols="0"]::up-button:hover{
border-image: url(:/img/up_orange.png);
}
QSpinBox[buttonSymbols="0"]::up-button:pressed{
}
QSpinBox[buttonSymbols="0"]::up-button:disabled{
border-image: url(:/img/up2_white.png);
}
QSpinBox[buttonSymbols="0"]::down-button{
width:20px;
height:14px;
subcontrol-origin:border;
subcontrol-position:bottom right;
right:2px;
bottom:1px;
border-image: url(:/img/down_white.png);
}
QSpinBox[buttonSymbols="0"]::down-button:hover{
border-image: url(:/img/down_orange.png);
}
QSpinBox[buttonSymbols="0"]::down-button:pressed{
}
QSpinBox[buttonSymbols="0"]::down-button:disabled{
border-image: url(:/img/down2_white.png);
}
/*表头*/
QHeaderView{
font: 15px "宋体";
color:rgb(230, 230, 230);
background-color: rgb(80, 80, 80);
}
QHeaderView::section:horizontal{/*横表头*/
min-height:30px;
border:0;
border-bottom:1px solid rgb(0, 170, 255);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(60, 60, 60, 255), stop:0.301136 rgba(40, 40, 40, 255), stop:0.909091 rgba(68, 68, 68, 255));
}
QHeaderView::section:vertical{/*竖表头*/
min-width:60px;
padding-left:15px;
border:1px solid rgb(128, 128, 128);
border-top:0;
border-left:0;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(60, 60, 60, 255), stop:0.301136 rgba(40, 40, 40, 255), stop:0.909091 rgba(68, 68, 68, 255));
}
QHeaderView::section{
font: 15px "宋体";
}
QHeaderView::section:hover{
color:black;
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(255, 177, 21, 255), stop:0.335227 rgba(245, 163, 0, 255), stop:0.909091 rgba(255, 192, 66, 255));
}
QHeaderView::section:checked{/*不取消高亮*/
font: 15px "宋体";
color: rgb(255, 170, 0);
}
QHeaderView::section:selected{
font: 15px "宋体";
color: rgb(255, 170, 0);
}
QHeaderView::section:checked:hover{
color: rgb(230, 230, 230);
}
QHeaderView::section:first{/*表头第一个位置*/
}
QHeaderView::down-arrow{/*图标用来排序的*/
}
QHeaderView::up-arrow{
}
/*表格*/
QTableView{/*对齐方式代码设置*/
border:1px solid rgb(128, 128, 128);
gridline-color: rgb(128, 128, 128);/*网格线颜色*/
background-color: rgb(80, 80, 80);
}
QTableView QTableCornerButton::section{/*表头左上*/
border:0;
border-bottom:1px solid rgb(0, 170, 255);
background-color: qlineargradient(spread:pad, x1:1, y1:0, x2:1, y2:1, stop:0 rgba(60, 60, 60, 255), stop:0.301136 rgba(40, 40, 40, 255), stop:0.909091 rgba(68, 68, 68, 255));
}
QTableView::item{/*表内容*/
font: 15px "宋体";
color: rgb(230, 230, 230);
background-color: rgb(80, 80, 80);
}
QTableView::item:selected{
color:black;
background-color: rgb(255, 170, 0);
}
QTableView::indicator{
width: 20px;
height: 20px;
}
QTableView::indicator:enabled:checked{
image: ;
}
QTableView::indicator:enabled:unchecked{
image: ;
}
/*滑动条*/
QSlider::groove:vertical {
background: red;
position: absolute;
left: 4px; right: 4px;
}
QSlider::handle:vertical {
height: 10px;
background: green;
margin: 0 -4px; 
}
QSlider::add-page:vertical {
background: white;
}
QSlider::sub-page:vertical {
background: pink;
}
/*菜单*/
QPushButton::menu-indicator{/*setmenu*/
image:none;
}
QMenu{
border:1px solid rgb(128, 128, 128);
background-color:rgb(70, 70, 70);
margin:0px;
padding:0px;
}
QMenu::item {
margin:0px;
padding:0 20 0 10px;
font:15px "宋体";
min-height:26px;
max-height:28px;
color:rgb(240, 240, 240);
background-color:rgb(70, 70, 70);
}
QSpacerItem{
background-color: rgb(0, 255, 0);
}
QMenu::item:disabled{
color:rgb(240, 240, 240);
background-color:rgb(110, 110, 110);
}
QMenu::item:selected {
color:black;
background-color: rgb(255, 170, 0);
}
QMenu::item:selected:disabled{
color:rgb(240, 240, 240);
background-color:rgb(110, 110, 110);
}
QMenu::separator {/*分割线*/
height: 1px;
background: transparent;
}

完结，Over~~~

猜你喜欢

转载自blog.csdn.net/gongjianbo1992/article/details/85638480
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022