做了几个项目之后,发现经常用的几个控件每次都需要设置样式,而且每次都是翻以前的项目样式粘贴复制,很麻烦,还不如直接统一做一下笔记,以后直接粘贴复制得了。省得东找西找。
QPushButton按钮
//QPushButton样式表
QPushButton{
background:#525253;
border-radius:4px;
color: #ffffff;
font:bold;
font-size:15px;
}
QPushButton:hover{
background:#2d96dc;
border:3px solid white;
}
QPushButton:pressed{
background:#2d96dc;
border:3px solid white;
}
QPushButton:checked{
background:#2d96dc;
border:3px solid white;
}
//如果想弄出按下有下划线的感觉的话,然后按钮的背景颜色通常都是设置为透明
QPushButton:checked{
background:#transparent;
border-bottom:3px solid #1C80FF;
}
//如果QPushButton用到了图片作为背景的话,那么border-radius:和border:就算设置了也不起作用
QPushButton{
border-image:url(:/image/pic.png);
}
//如果想调整控件大小
QPushButton{
min-height:20px;
min-width:20px;
max-width:50px;
max-height:50px;
}
效果如下
QSlider滑动条
/*滑动条*/
#滑块还没有滑到的部分
QSlider#volumeSlider::groove:horizontal{
height:6px;
margin-left:3px;
margin-right:3px;
border-radius: 3px;
background:rgba(180,180,180,100%);
}
#滑块手柄样式
QSlider#volumeSlider::handle:horizontal{
width: 12px;
min-height: 12px;
margin-top:-3px;
margin-bottom:-3px;
margin-left:-3px;
margin-right:-3px;
border-radius: 6px;
background:rgba(255,255,255,100%);
}
#滑块已经划过的部分
QSlider#volumeSlider::sub-page:horizontal{
height:6px;
margin-left:3px;
margin-right:3px;
border-radius: 3px;
background:rgba(0,164,255,100%);
}
margin-bottom:-3px;//表示除了占满滑条外,往下增加3px高度
margin-bottom:3px;//表示向内缩窄3px
效果如下:
声音滑动条
进度滑动条
QScrollBar滚动条
QtableWidget、QTextEdit、QtableView等控件都有滚动条
/*垂直滚动条整体*/
QScrollBar:vertical
{
width:12px;
background:#1a1a1a;
margin:0px,0px,0px,0px;
padding-top:0px; /*元素上内边距的宽度*/
padding-bottom:0px; 元素下内边距的宽度*/
}
/*滚动条中滑块的样式*/
QScrollBar::handle:vertical
{
width:12px;
background:#2d96dc;
border-radius:6px;
}
/*鼠标触及滑块样式*/
QScrollBar::handle:vertical:hover
{
background:#2d96dc;
}
/*设置下箭头*/
QScrollBar::add-line:vertical
{
border-image:none;
background:rgb(0,0,0);
}
/*设置上箭头*/
QScrollBar::sub-line:vertical
{
border-image:none;
background:rgb(0,0,0);
}
/*设置下箭头:悬浮状态
QScrollBar::add-line:vertical:hover
{
height:12px;
width:10px;
border-image:none;
subcontrol-position:bottom;
}
*/
/*设置上箭头:悬浮状态
QScrollBar::sub-line:vertical:hover
{
height:12px;
width:10px;
border-image:none;
subcontrol-position:top;
}
*/
/*当滚动条滚动的时候,上面的部分和下面的部分*/
QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical
{
background:rgb(0,0,0);
}
效果如下:
QGroupBox
QGroupBox{
margin-top:1ex;
border:3px solid #000000;
border-radius:5px;
background: #2e2e2e;
color:#ffffff;
}
QGroupBox::title{
subcontrol-origin:margin;
subcontrol-position:top center;
padding:1px;
}
效果如下
QTabWidget
QTabWidget QTabBar::tab
{
background:#4d4d4d;
font: 16pt;
width:150;
height:40px;
color:white;
}
QTabWidget QTabBar::tab:selected
{
background:#2d96dc;
}
QTabWidget::tab-bar {
alignment: center;
}
QTabWidget::pane{
border:none;
}
#第一个Tab
QTabBar::tab:first {
color:#ffffff;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
}
#最后一个Tab
QTabBar::tab:last{
color:#ffffff;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
效果如下: