QSS样式表汇总

目录

1、关于QPushButton的样式表

2、关于QComboBox的样式表

3、关于QSlider的样式表

4、关于QProgressBar的样式表

5、关于QMenu的样式表

6、关于QListWidget的样式表

6"、关于QListView的样式表

7、关于QTreeWidget的样式表

8、关于QGroupBox的样式表

9、关于QTabBar的样式表

10、去除表格中的虚线

11、关于QTableWidget的样式表

12、关于QScrollBar的样式表

---

1、关于QPushButton的样式表

QPushButton
{
    background-color: rgb(134,183,200); //背景色
    border:2px solid #5F92B2; //边界和边界颜色
    border-radius:5px; //边界圆滑
    color:white; //字体颜色
}

QPushButton:hover
{
    background-color: rgb(0,130,150); //伪状态经过时背景色
    border:2px solid #5F92B2; //边界和边界颜色
    border-radius:5px; //边界圆滑
    color:white; //字体为白色
}

QPushButton:hover:pressed
{
    background-color:rgb(85,170,255); //伪状态，点击时的背景色
    border:2px solid #3C80B1; //
    border-radius:5px;
    color:white;
}

 

2、关于QComboBox的样式表

QComboBox
{
    color:white;                   //设置字体颜色
    min-height: 50px;                //设置最小高度
    min-width: 60px;                //设置最小宽度
    background-color:transparent;          //背景色
    selection-background-color: rgb(80, 80, 80); //选中背景色
}

QComboBox QAbstractItemView
{
    font:14px;                   //下拉列表中的字体大小
    selection-color:white;            //选中时的字体颜色
    selection-background-color:rgb(80, 80, 80); //选中背景色
    background-color:rgb(80, 80, 80);      //背景色
}

QComboBox QAbstractItemView::item
{
    color:white;                //item的字体颜色
    min-height: 50px;             //item的最小高度
    min-width: 60px;              //item的最小宽度
}

QComboBox::down-arrow
{
    image:url(:/image/image/down.png);    //设置下拉的按钮样式图片
}

QComboBox::drop-down
{
    border:0px;                //设置下拉按钮边界宽度为0，将阴影边界取出
    min-width: 40px;              //设置下拉按钮宽度
}

如果设置列表样式可以选择使用设置视图

ui->comboBox->setView(new QListView());

效果如下：

3、关于QSlider的样式表

QSlider::groove:horizontal
{
      border: 1px solid #999999; //边界
      height: 20px; //高度
      background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4); //设置颜色渐变
      margin: 2px 0; //页边距
  }

QSlider::handle:horizontal 
{
      border-image: url(:/image/image/image/Slider.png); //滑动条图片
      width: 25px; //滑动条宽度
      height:20px; //滑动条高度
      margin: -2px 0; //页边距
      border-radius: 3px; //边界圆滑
}

QSlider::add-page:horizontal
{
     background: white; //添加页面的背景色，也就是未滑动的背景色
}

QSlider::sub-page:horizontal
{
  background- color:qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(231,80,229, 255), stop:1 rgba(7,208,255, 255)); //滑动后的背景色
}

效果如下：

4、关于QProgressBar的样式表

QProgressBar
{
    border: 2px solid grey; //边界色
    border-radius: 5px; //边界圆滑
    text-align: center; //文字居中
}

QProgressBar::chunk
{
    background-color: #CD96CD; //背景色
    width: 10px; //宽度
    margin: 0.5px; //页边距
}

效果如下：

5、关于QMenu的样式表

QMenu
{
    background-color:qlineargradient(x1: 0, y1: 0, x2: 0.7, y2: 0.7,stop: 0.5 #FF92BB, stop: 1 white); //背景色
}

QMenu::item:selected
{
    background-color:rgb(40,150,200); //选中色
}

效果如下：

6、关于QListWidget的样式表

QListWidget::item
{
    height:40px; //每个item的高度
    font-size:20px; //字体大小
}

QListWidget::item::hover
{
    background-color:rgb(9,150,200,100); //伪状态，鼠标经过背景色
}

QListWidget::item:selected
{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc); //选中背景色
}

效果如下：

6"、关于QListView的样式表

QListView
{
    Background-cp;pr:red;//背景色
    Alternate-background-color:yellow;//行与行之间交替的颜色setAlternatingRowColors(true);
    Show-decoration-selected:1;设置是否选中时，整行都高亮显示
}

//设置单个 item 的高度;
QListView::item
{
    height:24px;
}

//交替颜色设置
QListView::item:alternate
{
    Background:#000000;
}

//当条目被选中时
QListView::item:selected
{
    Border:2px solid #000000;
}
 
//当条目被选中，并且不是有效的
QListView::item::selected:!active
{
}

//鼠标悬浮在条目上
QListView::item::hover
{
}

7、关于QTreeWidget的样式表

QTreeWidget::item
{
    height:40px; //item高度
    font-size:20px; //item字体大小
}

QTreeWidget::item::hover
{
    background-color:rgb(9,150,200,100); //鼠标经过
}

QTreeWidget::item:selected
{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);//选中色
}

8、关于QGroupBox的样式表

QGroupBox
{
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: darkCyan;
    margin-top: 5px;
}

QGroupBox::title
{
    subcontrol-origin: margin;
    subcontrol-position: top center;
    padding: 0 3px;
    margin-top: 0px;
}

9、关于QTabBar的样式表

QTabBar::tab
{
    min-width:100px;
    color: white;
    background-color:qlineargradient(x1: 0, y1: 0, x2: 0.7, y2: 0.7,stop: 0.3 rgb(40,150,200,160),stop: 0.6 rgb(40,150,200,220),stop:1 rgb(40,150,200,255));
    border: 0px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding:5px;
}

QTabBar::tab:!selected
{
    margin-top: 5px;
}

QTabBar::tab:selected
{
    color: white;
    font-size:14px;
    font-weight:bold;
}

效果如下图：

 

10、去除表格中的虚线

*{

    outline:0px;

}

11、关于QTableWidget的样式表

QHeaderView
{
    background-color:transparent;
}

QHeaderView::section
{
    border: none;
    background-color: #1D5366;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    min-height: 36px;
    max-height: 36px;
}

QTableWidget
{
    border:0px solid;
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:#5C8290;
    background-color:transparent;
    alternate-background-color: #1D5366;
}

QTableWidget::item
{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    min-height: 36px;
    max-height: 36px;
}

QTableWidget::item:selected
{
    out-line:none;
}

12、关于QScrollBar的样式表

QScrollBar:vertical
{
    background:transparent;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:4px;
    padding-right:4px;
    border-left:1px solid transparent;;
}

QScrollBar::handle:vertical
{
    background:#04CBDF;
    border-radius:6px;
    min-height:60px;
    border-radius:4px;
}

QScrollBar::handle:vertical:hover
{
    background:#04CBDF;
    border-radius:4px;
}

QScrollBar::add-page
{
    background:transparent;
}

QScrollBar::sub-page
{
    background:transparent;
}

QScrollBar::add-line:vertical
{
    background:url(none) center no-repeat;
}

QScrollBar::sub-line:vertical
{
    background:url(none) center no-repeat;
}