Qt样式表（窗口、按钮之类，有图片和代码详细注释）

1、前言

前言：记录和存储一些样式表，方便自己使用也方便别人借鉴。

2、QWdiget窗口添加背景图片

如果Qt窗口是QWidget直接添加背景图片会显示不出来。

像上面一样，插入图片虽然在ui界面会显示，但是运行之后，并不会显示出来。

2.1使用Frame解决

先添加一个Frame

点击QWidget，进行栅格布局

栅格布局后，把这些边距全部变为0

重新添加背景图片

成功显示背景图片

3、主题1（黑色背景+发光边框+冷色调）

3.1 QWidget

/* 窗口背景 */
QWidget {
    background-color: #0a0a1a;		/*暗黑色背景*/
    color: #00ffff;					/*青色文字*/	
    font-family: "Consolas";		/*显示文字的字体*/
}

3.2 QPushButton

/* 霓虹按钮 */
/*按钮样式*/
QPushButton {
    background: transparent;		/*透明背景*/
    border: 2px solid #00ffff;		/*青色实线边框*/
    border-radius: 3px;				/*按钮边框的圆角半径为3像素*/
    color: #00ffff;					/*按钮文字的颜色为青色*/
    padding: 10px 20px;				/*按钮内边距，上下为10像素，左右为20像素*/
    font-size: 14px;				/*字体大小*/
    text-transform: uppercase;		/*按钮上文字转换为大写*/
}
/* 当鼠标悬停在QPushButton按钮上时的样式设置 */
QPushButton:hover {
    background: rgba(0, 255, 255, 0.1);	/*按钮的背景为半透明的青色，透明度为0.1 */
    box-shadow: 0 0 15px #00ffff;		/*阴影效果，水平和垂直偏移量为0，模糊半径为15像素，颜色为青色*/
}

3.3QLineEdit

/* 发光输入框 */
/* 输入框样式 */
QLineEdit {
    background: #1a1a2a;				/*深蓝色背景*/
    border: 2px solid #4a4aff;			/*像素为2的蓝色边框*/
    border-radius: 5px;					/*圆角半径为5像素*/
    padding: 8px;						/* 内边距为8像素，确保文字与边框之间有适当间距 */
    color: #ffffff;						/*文字颜色为白色*/
}
/* 当输入框获得焦点时的样式 */
QLineEdit:focus {
    border-color: #00ffff;			 /* 将边框颜色改为亮青色*/
    box-shadow: 0 0 10px #00ffff;	 /*阴影，水平和垂直方向的偏移量为0，模糊半径为10像素，颜色为青色*/
}

3.4 QTextEdit

/* 霓虹风格文本编辑框 */
QTextEdit {
    background-color: #1a1a2a;         /* 深蓝背景匹配输入框 */
    border: 2px solid #4a4aff;        /* 默认紫色霓虹边框 */
    border-radius: 5px;               /* 统一圆角 */
    color: #00ffff;                   /* 青色文字保持主题色 */
    font-family: "Consolas";          /* 继承代码字体 */
    padding: 8px;                     /* 与输入框对齐 */
    selection-background-color: #4a4aff;  /* 选中文本紫色高亮 */
    selection-color: white;
}

/* 焦点状态增强光效 */
QTextEdit:focus {
    border-color: #00ffff;            /* 聚焦时切换为青色边框 */
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);  /* 增强光晕 */
}

4、主题二（极简冰川蓝）

4.1QWidget

/* 渐变冰川蓝背景 */
QWidget{
    background: qlineargradient(
        x1:0 y1:0, x2:1 y2:1,
        stop:0 #E0F7FA, stop:1 #EBF5FB	/*左上到右下渐变的冰川蓝*/
    );
border-radius:20px;		/*半径为20的圆角边框*/
}

4.2 QLineEdit

/* QLineEdit基本样式 */
QLineEdit {
    background: rgba(255, 255, 255, 0.8);	/*背景颜色为白色，透明度80%*/
    border: 1px solid #B0E0E6;				/*边框为1像素实现，颜色为粉蓝色*/
    border-radius: 8px;						/*半径为8的圆角边框*/
    padding: 8px;							/*内容与边框之间留8像素的空白*/
    color: #2C3E50;							/*深灰色文本*/
}
/* 当QLineEdit获得焦点时的样式 */
QLineEdit:focus {
    border-color: #87CEEB;			/*边框颜色为天空蓝*/
}

4.3QTextEdit

QTextEdit {
    background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    border: 1px solid #B0E0E6;           /* 蓝色边框 */
    border-radius: 8px;                  /* 圆角 */
    padding: 15px;                       /* 宽松内边距 */
    color: #2C3E50;                      /* 深蓝文字 */
    font: 16px "Arial";                  /* 清晰易读字体 */
}

QTextEdit:focus {
    border-color: #87CEEB;               /* 聚焦时边框亮蓝 */
}

QTextEdit::placeholder {
    color: #6C7A89;                      /* 淡灰占位文字 */
}

4.4QPushButton

/*按钮基本样式*/
QPushButton {
    background: qlineargradient(
        x1:0 y1:0, x2:0 y2:1,
        stop:0 #87CEEB, stop:1 #B0E0E6	/*左上到右下渐变的浅蓝到淡蓝*/
    );
    border: none;			/*无按钮边框*/
    border-radius: 12px;	/*半径为12的圆角边框*/
    padding: 10px 24px;		/*上下为10px，左右为24px内容与边框之间的留白*/
    color: #2C3E50;			/*深灰色文字*/
    font-weight: bold;		/*文字为粗体*/
}
/*当鼠标悬停在按钮上时的样式*/
QPushButton:hover {
    background: qlineargradient(
        x1:0 y1:0, x2:0 y2:1,
        stop:0 #6495ED, stop:1 #AFEEEE		/*蓝色到淡蓝绿色渐变*/
    );
}
/*当QPushButton被按下时的样式*/
QPushButton:pressed {
    background: qlineargradient(
        x1:0 y1:0, x2:0 y2:1,
        stop:0 #4682B4, stop:1 #87CEFA		/*深蓝色浅蓝色渐变*/
    );
}

总结

以上就是Qt的一些样式表了，后续我也会不定期更新一些好看的样式表，浏览过程中， 如若发现错误，欢迎大家指正，有问题的可以评论区留言或者私信。最后，如果大家觉 得有所帮助，可以点一下赞，谢谢大家！世界扑朔迷离，愿我们保持冷静，继续前行！