Qt样式表（QSS）Demo：⿊⾊扁平加渐变（2019-1-3改进）
把上次的纯⾊背景加了点渐变，感觉好看了点。
关于颜⾊显⽰：有些电脑显⽰器设置偏亮/暗，可以调节下。
关于控件⼤⼩：标题⾼度30像素，控件⾼度28px。
关于字体⼤⼩：⼀般设置为15px的宋体，没有考虑分辨率问题。
关于图标：阿⾥图标
本例百度云连接：
提取码：0q96
效果图：
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 }
#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, 25 }
/*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, 2 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);
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;
transparent中文翻译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;
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, 8 }
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, }
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, 8 }
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, }
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);/*背景⾊-空隙颜⾊*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。