QSS 属性类型集合

简述

本文将概括不同属性类型的语法和含义。

属性类型集合

类型	语法	描述
Alignment	{ top | bottom | left | right | center }*	水平和/或垂直对齐
Attachment	{ scroll | fixed }*	滚动或固定附件
Background	{ Brush | Url | Repeat | Alignment }*	Brush、Url、Repeat和Alignment的序列
Boolean	0 | 1	真(1)或假(0)
Border	{ Border Style | Length | Brush }*	边框属性
Border Image	none | Url Number{4}(stretch | repeat){0, 2}	边框图像是由九部分组成的图像(左上、上中、右上、左中、中、右中、左下、下中、右下)。当需要一定大小的边界时，就按原样使用角部分，并拉伸或重复顶部、右侧、底部和左侧部分以生成所需大小的边界。详细信息请参考CSS3规范。
Border Style	dashed | dot-dash | dot-dot-dash | dotted | double | groove | inset | outset | ridge | solid | none	指定用于绘制边框的模式。详细信息请参考CSS3规范。
Box Colors	Brush{1, 4}	Brush出现一到四次，分别指定顶部、右侧、底部和左侧边缘。如果未指定左侧颜色，则认为它与右侧颜色相同。如果未指定底部颜色，则认为它与顶部颜色相同。如果未指定右侧颜色，则认为它与顶部颜色相同。QLabel { border-color: red; } /* red red red red */ QLabel { border-color: red blue; } /* red blue red blue */ QLabel { border-color: red blue green; } /* red blue green blue */ QLabel { border-color: red blue green yellow; } /* red blue green yellow */
Box Lengths	Length{1, 4}	Length出现一到四次，分别指定边框的顶部、右侧、底部和左侧边缘。如果未指定左侧长度，则认为它与右侧长度相同。如果未指定底部长度，则认为它与顶部长度相同。如果未指定右侧长度，则认为它与顶部长度相同。QLabel { border-width: 1px } /* 1px 1px 1px 1px */ QLabel { border-width: 1px 2px } /* 1px 2px 1px 2px */ QLabel { border-width: 1px 2px 3px } /* 1px 2px 3px 2px */ QLabel { border-width: 1px 2px 3px 4px } /* 1px 2px 3px 4px */
Brush	Color | Gradient | PaletteRole	指定调色板中的颜色、渐变或条目
Color	rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name	指定一个颜色为RGB(red， green，blue)或RGBA(red，green，blue，alpha)或HSV(hue，saturation，value)或HSVA(hue，saturation，value，alpha)或一个命名的颜色。rgb()或rgba()语法可用于0到255之间的整数值或百分比。hsv()或hsva()中的s，v和a的值必须在0到255范围内而h的值必须在0到359范围内。QLabel { border-color: red } /* opaque red */ QLabel { border-color: #FF0000 } /* opaque red */ QLabel { border-color: rgba(255, 0, 0, 75%) } /* 75% opaque red */ QLabel { border-color: rgb(255, 0, 0) } /* opaque red */ QLabel { border-color: rgb(100%, 0%, 0%) } /* opaque red */ QLabel { border-color: hsv(60, 255, 255) } /* opaque yellow */ QLabel { border-color: hsva(240, 255, 255, 75%) } /* 75% blue */
Font	(Font Style | Font Weight){0, 2} Font Size String	字体属性
Font Size	Length	字体大小
Font Style	normal | italic | oblique	字体样式
Font Weight	normal | bold | 100 | 200 … | 900	字体粗细(重量)
Gradient	qlineargradient | qradialgradient | qconicalgradient	指定渐变填充。有三种类型的渐变填充：线性渐变在开始点和结束点之间插入颜色；径向梯度渐变在一个圆圈内的焦点和结束点之间插入颜色；锥形渐变在中心点附近插入颜色。渐变是在对象边界模式下指定的。想象一下渲染渐变的方框，它的左上角在(0, 0)，它的右下角在(1, 1)。渐变参数将被指定为从0到1的百分比。这些值在运行时外推到实际的坐标。可以指定边框之外的值(例如-0.6或1.8)。警告：结束点必须按升序排列。QTextEdit { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop: 0.4 gray, stop:1 green); } /* linear gradient from white to green */ QTextEdit { background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop: 0.4 rgba(10, 20, 30, 40), stop:1 rgb(0, 200, 230, 200)); } /* linear gradient from white to green */ QTextEdit { background: qconicalgradient(cx:0.5, cy:0.5, angle:30, stop:0 white, stop:1 #00FF00); } /* conical gradient from white to green */ QTextEdit { background: qradialgradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green); } /* radial gradient from white to green */
Icon	(Url (disabled | active | normal | selected)? (on | off)? )*	url 、QIcon::Mode和QIcon::State的列表。* { file-icon: url(file.png), url(file_selected.png) selected; } QMessageBox { dialogbuttonbox-buttons-have-icons: true; dialog-ok-icon: url(ok.svg); dialog-cancel-icon: url(cancel.png), url(grayed_cancel.png) disabled; }
Length	Number (px | pt | em | ex) ?	一个数字后面跟着测量单位。CSS标准建议用户代理必须忽略带有非法值的声明。在Qt中，必须指定测量单位。为了与早期版本的Qt兼容，在大多数上下文中，不带测量单位的数字被视为像素。支持的测量单位：px，像素值；pt，一个点的大小(七十二分之一英寸)；em，字体的em宽度('M’的宽度)；ex，字体的ex宽度('x’的高度) 。然而，Qt被限制为字体大小使用pt和px，其他大小使用px、em或ex。
Number	十进制整数或实数	例如：0、18、+127、-255、12.23、-.5、0009
Origin	margin | border | padding | content	指示使用四个矩形中的哪一个。margin：边界矩形；border：边框矩形；padding：填充矩形；content：内容矩形。请参考盒子模型。
PaletteRole	alternate-base | base | bright-text | button | button-text | dark | highlight | highlighted-text | light | link | link-visited | mid | midlight | shadow | text | window | window-text	这些值对应小部件的QPalette中的颜色角色。QPushButton{ color: palette(dark); }
Radius	Length{1, 2}	长度出现一到两次。如果只指定一个长度，它被用作定义角的四分之一圆的半径。如果指定了两个长度，则第一个长度是四分之一椭圆的水平半径，而第二个长度是垂直半径。
Repeat	repeat-x | repeat-y | repeat | no-repeat	指示重复性质的值。 repeat-x：水平方向重复；repeat-y：垂直方向重复；repeat：水平和垂直方向重复；no-repeat：不重复
Url	url(filename)	文件名是本地磁盘或使用Qt资源系统存储的文件的名称。设置图像会隐式设置其宽度和高度。

参考

参考Qt助手，如有错误，请指正，谢谢！