【二十九】【QT开发应用】初步认识QSS,字体样式,边框样式,边框圆角,文字位置,背景样式,动态悬浮样式

Qt 中的 QSS（Qt Style Sheets）类似于 CSS，用于自定义 Qt 应用程序中控件的外观和样式。通过 QSS，开发者可以灵活地改变窗口、按钮、标签等控件的颜色、字体、边框、间距等视觉元素，而不需要深入到绘制逻辑中。

普通示例
QLabel
{

background-color: rgb(54,54,54);   /*背景色*/
color: rgb(230,230,230);           /*字体颜色，前景色*/
font-family: "Microsoft YaHei";    /*字体类型*/
font-size: 14px;                   /*字体大小*/

}
QLabel
{

background-color: rgb(54,54,54);   /*背景色*/
color: rgb(230,230,230);           /*字体颜色，前景色*/
font-family: "Microsoft YaHei";    /*字体类型*/
font-size: 14px;                   /*字体大小*/

}

d0bd49d5db38d806acc4c1c8b75ffe40_b073883884294a5da429072420461748.png
字体样式
font-family

设置字体类型，可以指定一个或多个字体名称。多个字体之间用逗号分隔，当首选字体不可用时，系统会尝试使用下一个字体。
font-size

设置字体大小，通常使用像素（px）为单位。
font-weight

控制字体的粗细。常用值为 normal、bold，或者数值（100 到 900，如 font-weight: 400; 表示正常粗细）。
font-style

设置字体的样式，可以是 normal（正常）、italic（斜体）或 oblique（倾斜）。
QLabel{
font-family: "Microsoft YaHei";
font-size:25px;
font-style:italic;
font-weight:bold;
color:#123456;
background-color:white;
}
QLabel{
font-family: "Microsoft YaHei";
font-size:25px;
font-style:italic;
font-weight:bold;
color:#123456;
background-color:white;
}

efbf6a3ccc9ccd85144c1467f9800e4a_79e446bc69ec46489ace630fc3e4a279.png

边框样式
常见的 border 样式属性
border-width：设置边框的宽度。可以单独指定每个边的宽度（上、右、下、左）或为所有边设置相同的宽度。支持单位包括像素（px）、百分比（%）等。

border-style：设置边框的样式。可选值包括：

none：无边框
solid：实线
dashed：虚线
dotted：点线
double：双实线
groove：凹槽
ridge：脊状
inset：内凹
outset：外凸
border-color：设置边框的颜色。可以使用颜色名称、rgb()、rgba()、十六进制等格式。可以单独指定每个边的颜色或为所有边设置相同的颜色。

border-radius：设置边框的圆角。可以为所有四个角设置相同的圆角半径，也可以分别为每个角设置不同的圆角半径。支持单位包括像素（px）、百分比（%）。

border-top、border-right、border-bottom、border-left：分别设置每个边的边框属性，包括宽度、样式和颜色。用于为特定边设置独特的边框样式。

border-top-width、border-right-width、border-bottom-width、border-left-width：单独设置每个边的边框宽度。可用于创建不规则的边框样式。

border-top-color、border-right-color、border-bottom-color、border-left-color：分别设置每个边的边框颜色。用于在同一控件上实现多种颜色的边框效果。

border-top-style、border-right-style、border-bottom-style、border-left-style：分别设置每个边的边框样式。可用于组合不同边框样式（如顶部为实线，底部为虚线）。

QLabel{
border-style:solid;

border-width:4px;
border-color:red;

background-color:black;
color:white;
}
QLabel{
border-style:solid;

border-width:4px;
border-color:red;

background-color:black;
color:white;
}

d44c518ba730fc5973e91dad86729bb8_48ae22a53fa04a62aafc4095fd4a6db8.png

border-top-style: solid;
border-top-width: 2px;
border-top-color: red;

border-right-style: dashed ;
border-right-width: 3px;
border-right-color: green;

border-bottom-style: solid ;
border-bottom-width: 2px;
border-bottom-color: blue;

border-left-style: dotted;
border-left-width: 3px;
border-left-color: aqua;
border-top-style: solid;
border-top-width: 2px;
border-top-color: red;

border-right-style: dashed ;
border-right-width: 3px;
border-right-color: green;

border-bottom-style: solid ;
border-bottom-width: 2px;
border-bottom-color: blue;

border-left-style: dotted;
border-left-width: 3px;
border-left-color: aqua;

813ae158176dade4536102259bb9058d_a2fdec77eb91436982945eb536ef7d54.png
边框圆角
border-top-left-radius: 5px;
border-top-right-radius: 15px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 35px;

border-width:4px;
border-style:solid;
border-top-left-radius: 5px;
border-top-right-radius: 15px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 35px;

border-width:4px;
border-style:solid;

46ae20f01ab18172f411efb564ea1725_806431e40b7a4b3ba243fea2d7e6bf5d.png
文字位置
QLabel{
padding-left: 100px;
padding-top: 1px;

border-style:solid;
border-color:pink;
border-width:4px;

background-color:black;
color:white;
font-size:20px;
}
QLabel{
padding-left: 100px;
padding-top: 1px;

border-style:solid;
border-color:pink;
border-width:4px;

background-color:black;
color:white;
font-size:20px;
}

b5a8d4dbb5df9ecdb1b6151c4428a0ca_d9d69fd9ea184b47bd713eddbf9933e7.png
背景样式
background-color：设置背景颜色。可以使用颜色名称（如 red）、rgb()、rgba()、十六进制（如 #FFFFFF）等格式。

background-image：设置背景图像，使用 url() 引入图片。可以是文件路径或资源路径，如：background-image: url(:/resources/image.jpg);。

background-repeat：控制背景图像的重复方式。常见值包括：

repeat：背景在水平和垂直方向都重复。
repeat-x：背景仅在水平方向重复。
repeat-y：背景仅在垂直方向重复。
no-repeat：背景不重复，只显示一次。
background-position：设置背景图像的位置。可以使用关键字（left、right、center、top、bottom）或具体的坐标（如 50px 100px、center center）来定位背景图片。

QLabel{
background-color: rgb(54,54,54);
background-image: url(":/resource/1.png"); /显示背景图片, 也可以不用引号/
background-repeat: no-repeat; /不重复显示/
background-position: left center;
}
QLabel{
background-color: rgb(54,54,54);
background-image: url(":/resource/1.png"); /显示背景图片, 也可以不用引号/
background-repeat: no-repeat; /不重复显示/
background-position: left center;
}

51926a2c30fd9a3ce9f8430dd84aa573_534bcbe89c5b4dcea97a8183ca7fb821.png

动态悬浮样式
伪状态选择器（:hover）：

:hover 是 QSS 中的伪状态选择器，用于设置控件在鼠标悬浮时的样式。它可以与任何控件类型一起使用（如 QLabel:hover、QPushButton:hover），改变控件的外观。
动态属性：

可以在 :hover 状态下改变控件的各种属性，如文本颜色（color）、背景颜色（background-color）、边框样式（border-color、border-width、border-style）等，实现动态视觉效果。
常用动态属性：

color: red;
background-color: blue;
border-color:black;
border-width:4px;
border-style:solid;

}
QLabel:hover
{

color: red;
background-color: blue;
border-color:black;
border-width:4px;
border-style:solid;

}

ca384556528ad6592e7c7197d586a747_b1506a8a8e8a420e98a0232928d41a52.png
结尾
最后，感谢您阅读我的文章，希望这些内容能够对您有所启发和帮助。如果您有任何问题或想要分享您的观点，请随时在评论区留言。
同时，不要忘记订阅我的博客以获取更多有趣的内容。在未来的文章中，我将继续探讨这个话题的不同方面，为您呈现更多深度和见解。
谢谢您的支持，期待与您在下一篇文章中再次相遇！

【二十九】【QT开发应用】初步认识QSS,字体样式,边框样式,边框圆角,文字位置,背景样式,动态悬浮样式

唠叨的甘蔗

引用和评论

Java高级之动态代理

qml实现头像裁剪功能

qt实现无边框窗口(去除标题栏的原生windows窗口)

【TVM 教程】线性和递归核

Qml 实现仿前端的 Notification (悬浮出现页面上的通知消息)

【C++打怪之路Lv4】-- 类和对象

qt实现截图工具