关于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;
}

关于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());

效果如下：


qss QCombobox 设置item列表项边框_Qt

qss QCombobox 设置item列表项边框_背景色_02




关于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)); //滑动后的背景色
}

效果如下：


qss QCombobox 设置item列表项边框_样式表_03


关于QProgressBar的样式表

QProgressBar
{

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

QProgressBar::chunk
{

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

效果如下：

qss QCombobox 设置item列表项边框_Qt_04



关于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); //选中色
}

效果如下：

qss QCombobox 设置item列表项边框_QSS_05



关于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); //选中背景色
}

效果如下：


qss QCombobox 设置item列表项边框_ide_06


关于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);//选中色
}