QSS样式表

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

效果如下：

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

}

效果如下：

关于QProgressBar的样式表

QProgressBar

{

border: 2px solid grey; //边界色

border-radius: 5px; //边界圆滑

text-align: center; //文字居中

}

QProgressBar::chunk

{

background-color: #CD96CD; //背景色

width: 10px; //宽度

margin: 0.5px; //页边距

}

效果如下：

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

}

效果如下：

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

}

效果如下：

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

}

如要下载图片资源，请到我的有道云笔记

http://note.youdao.com/noteshare?id=c12726e82660a9ed208783755c2a15d7&sub=F418A5037DD94288BFAFE8816C38276B