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