qss样式表总结（使用时直接复制粘贴修改）

原创已于 2025-04-28 19:55:38 修改

· 748 阅读

24 ·

版权

文章标签：

#c++ #qt

于 2025-02-28 14:28:26 首次发布

QT的零零碎碎专栏收录该内容

26 篇文章

订阅专栏

颜色

16进制：#ffbbcc；#ffeeeecc(8位时，前面2位的ff表示透明度)

10进制：rgb(255,255,255)；rgba(255,200,200,255)(最后一个数字表示透明度)

---------------------------------------------------------------------------------------------------------------------------------

字体

字体连写：

font: italic   bold   36px  "华文彩云";

按顺序是：字体风格，字体粗细，字体大小，字体族

字体大小：

font-size: 24px;

字体粗细：

font-weight: bold;

字体族：

font-family: "Microsoft YaHei";

字体风格:

font-style: italic;

字体颜色:

color:red;

字体装饰:(下划线、删除线之类的)

text-decoration:underline;

---------------------------------------------------------------------------------------------------------------------------------

边框

边框连写：

border: 1px  solid  red;

按顺序是：边框宽度边框风格边框颜色

边框宽度：

border-width: 1px;（4条边）

边框颜色：

border-color: green  red;（上下为绿，左右为红）

边框风格：

border-style: solid;

还可以单独指定某一条边框

border-top;

border-right;

border-bottom;

border-left;

圆角半径

border-radius:3px;(4个角的圆角半径是3px)

分别指定4个角：

border-top-left-radius;

border-top-right-radius;

border-bottom-right-radius;

border-bottom-left-radius;

--------------------------------------------------------------------------------------------------------------------------------

背景

背景连写：

background:  yellow  url(:/img/cat.png)   no-repeat  center;

按顺序是背景色、背景图片、背景平铺、背景位置

background: url(:/img/cat.png)  repeat  right bottom;

按顺序是背景图片、背景平铺、背景水平位置、背景上下位置

background:  transparent;

也可以只指定其中1个或几个

背景颜色

background-color: yellow;

背景图片

background-image: url(:/img/cat.png);

背景平铺

background-repeat: no-repeat;

背景位置

background-position:  right center;

背景渐变色

其中spread表示传播方向：pad（默认）、repeat、reflect；

渐变的介绍参考这个博主：一文搞懂Qt中的颜色渐变(QGradient Class)_qt 渐变色-优快云博客

线性渐变

background-color: qlineargradient(spread:pad,x1:0, y1:0, x2:0, y2:1, stop:0.2 red, stop:1 blue);

径向渐变

background:qradialgradient(spread:pad,cx:0, cy:0, radius: 1,  fx:0.5, fy:0.5, stop:0 white, stop:1 green) ;

锥形渐变

background: qconicalgradient(cx:0.5, cy:0.5, angle:30,  stop:0 white, stop:1 #00FF00);

--------------------------------------------------------------------------------------------------------------------------------

边框图片

该属性可以实现图片随着控件的形状任意缩放

如果只是单纯的想实现图片随着控件的形状任意缩放，则只需要指定border-image即可

border-image:url(:/img/test.png);

如果想实现更多的效果

则还需要搭配边框border，通常border-image四边的宽度和边框宽度一致

{/*上右下左 全为30  ，默认是拉伸*/
border-image:url(:/img/test.png) 30;

border-top: 30px transparent;
border-bottom: 30px transparent;
border-right: 30px transparent;
border-left:30px transparent;}

{/*上右下左 分别为 10 30 10 30 的内容*/
border-image:url(:/img/test.png) 15 30 15 30 ; 
/*四个边框宽度*/
border-top: 30px transparent;
border-bottom: 30px transparent;
border-right: 30px transparent;
border-left:30px transparent;}

{ /边框宽度33%的比例、  上下 是重复 、左右 是 拉伸*/
border-image:url(:/img/test.png) 33%  repeat  stretch ; 
/*四个边框宽度*/
border-top: 30px transparent;
border-bottom: 30px transparent;
border-right: 30px transparent;
border-left:30px transparent;}

--------------------------------------------------------------------------------------------------------------------------------

qproperty-xxxxxx

样式表还支持qproperty前缀的属性，但是在伪状态中，qproperty前缀修饰的属性不会生效

QLabel{   
/*属性*/
qproperty-minimumSize: 200px 100px;
qproperty-maximumSize: 200px 100px;
 
qproperty-text:"样式效果";
qproperty-alignment:AlignCenter;

qproperty-pixmap: url(:/img/plane.png); 
qproperty-scaledContents: true; }

--------------------------------------------------------------------------------------------------------------------------------

QLineEdit

QLineEdit的PlaceHolderText和清除按钮的颜色会自动根据文本颜色调整，无法定制

QLineEdit{
font: normal normal 16px  "Microsoft Yahei";
border:1px solid red;
padding:5px;
color: black;
background:pink;
/*选中背景色*/
selection-background-color:yellow;
/*选中的文字颜色*/
selection-color:green;
/*可在qss里设置只读
qproperty-readOnly:true;*/
/*密码模式下，显示的掩码*/
lineedit-password-character:10084;
/*密码模式下，输入字符后多久(ms)变成掩码*/
lineedit-password-mask-delay: 300 ;  
}
/*只读伪状态*/
QLineEdit:read-only {
border-color: black;
background: gray;
}
/*属性选择器控制不同模式下的样式*/
/*密码模式下的样式*/
QLineEdit[echoMode="2"]
{  
	color: red;  
    font-size:20px; 
}

--------------------------------------------------------------------------------------------------------------------------------

QPushButton

需要注意的是：hover伪状态设置一定要在pressed伪状态之前

QPushButton
{ 
	padding:0px 4px;/*上下padding为0px 左右为4px    4个值为上右下左*/ 
	border: 1px solid #aaaaaa;/*边框*/
    border-radius:8px;/*圆角边框*/
	background: qlineargradient(spread:pad,x1:0, y1:0, x2:0, y2:1, stop:0 #ffffff, stop:1 #eeeeee);/*渐变背景色*/
	outline:none;/*表示焦点时无虚线框*/
    text-align: center;/*文字对齐方式*/
	font:normal normal 15px "Microsoft Yahei";
    image:url("./image/222.jpg");
}
/*鼠标悬停在按钮上，注意hover伪状态设置一定要在pressed伪状态之前！！！！！！！！！！*/
QPushButton:hover
{
	background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #ee0000, stop:1 #ffffff);
	border:1px solid pink;
}
/*按钮选中，需要checkable设置为true才生效 */
QPushButton:checked
{
    font-size:24px;
	font-style:italic ;
    font-weight:bold ;
}
/*按钮按下时*/
QPushButton:pressed
{
	background: yellow;
} 

/*按钮被禁用*/
QPushButton:disabled
{
	background: gray;
}

按钮贴图：4种方法

background-image （不会缩放，可以指定位置，或者平铺效果）
icon（图片在文字的旁边，如果代码里设置了icon，则该属性不生效，还可通过icon-size属性指定图片大小）

image（图片在正中心，且会随着按钮的尺寸等比例缩放）

border-image（图片填满整个按钮）

--------------------------------------------------------------------------------------------------------------------------------

QRadioButton、QCheckBox

他们相关的子控件是::indicator

相关的伪状态是:checked ，unchecked，indeterminate(QCheckBox支持，表示半选状态)

其中，样式表中spacing属性可以指定::indicator 和文本的间距

setLayoutDirection接口可以指定::indicator 和文本的排列方向

QRadioButton

QRadioButton {  
    color:  red;/*文字颜色*/
	spacing:20px;/*间距20px*/
}

 /*左侧指示子控件*/
QRadioButton::indicator {
	height: 16px; 
	width: 16px;
	border-radius:8px;
	border-width: 1px;
    border-style:solid;
	border-color: blue;	
    top:2px;/*还可以用子控件的几个位置属性来微调子控件的位置*/
}

/*左侧指示子控件选中后背景变成渐变色*/
/*还可以贴图*/
QRadioButton::indicator:checked { 
    /*渐变背景*/
	background-color: qlineargradient(spread:pad, x1:0.5, y1:1, x2:0.5, y2:0, stop:0 rgba(90, 113, 0, 255), stop:1 rgba(0, 0, 252, 255));
}

/*左侧指示子控件未选中背景变成灰色*/
QRadioButton::indicator:unchecked {  
	background-color: gray;
}

QCheckBox

QCheckBox
{
    spacing: 15px;/*左右子控件的间距*/
    color: green;
}
 
 /*左侧指示子控件*/
QCheckBox::indicator 
{
    width: 20px;
    height:20px;
}

/*选择框未选中*/
QCheckBox::indicator:unchecked {
       image: url(:/img/u1.png);
}

QCheckBox::indicator:unchecked:hover {
     image: url(:/img/u2.png);
}

QCheckBox::indicator:unchecked:pressed {
    image: url(:/img/u3.png);
}


/*选择框选中*/

QCheckBox::indicator:checked {
    image: url(:/img/c1.png);
}

QCheckBox::indicator:checked:hover {
     image: url(:/img/c2.png);
}

QCheckBox::indicator:checked:pressed {
     image: url(:/img/c3.png);
}

/*选择框部分选中, 需要三态的复选框 ，tristate设置为true */
QCheckBox::indicator:indeterminate {
    image: url(:/img/i1.png);
}

QCheckBox::indicator:indeterminate:hover {
      image: url(:/img/i2.png);
}

QCheckBox::indicator:indeterminate:pressed {
    image: url(:/img/i3.png);
}

--------------------------------------------------------------------------------------------------------------------------------