QT样式表的使用（CSS）

一、颜色的设置

1.比较常用的颜色设置

ui->label->setStyleSheet("QLabel{color:red;}");

2.使用RGB的方式设置颜色

通过0-255的数值调节颜色，可以设置所有想要的颜色

ui->label->setStyleSheet("QLabel{color:rgb(0,255,255);}");

3.设置所有label都应用统一个CSS

这样无论向ui中拖入多少个控件，都使用这一种CSS。

this->setStyleSheet("QLabel{color:rgb(0,255,255);}");

 

二、设置背景色

当然可以用RGB，也可以使用red这种简单的颜色

ui->label->setStyleSheet("QLabel{background-color:rgb(0,0,255);}");

 

三、设置背景图片

1.url里面填写添加的资源文件的路径名就可以了

ui->label->setStyleSheet("QLabel{background-image:url(:/new/picture/clip_image039.jpg);}");

 

2.上面的设置背景的方式不尽人意，使用border-image就可以自适应大小了

ui->label->setStyleSheet("QLabel{border-image:url(:/new/picture/clip_image039.jpg);}");

 

3.对图片进行裁剪

    4个15，就是代表将图片向4个方向进行裁剪

ui->label->setStyleSheet("QLabel{border-image:url(:/new/picture/clip_image039.jpg) 15 15 15 15 stretch stretch;}");

 

四、点击按钮更换图片

1.按键被按下时更换图片

ui->pushButton->setStyleSheet("QPushButton:pressed{border-image:url(:/new/picture/clip_image039.jpg);}");

2.鼠标位于控件上更换图片

ui->pushButton->setStyleSheet("QPushButton:hover{border-image:url(:/new/picture/clip_image039.jpg);}");

3.控件获得焦点更换图片

ui->pushButton->setStyleSheet("QPushButton:focus{border-image:url(:/new/picture/clip_image039.jpg);}");