QSS_填充颜色

---

1. 概述

可以分为 3 类：

• Color：纯色（常用）
• Gradient：渐变色
• PaletteRole：调色板角色

---

2. Color：纯色

可以指定以下颜色值：

• 颜色名
• #rrggbb
• rgb(r, g, b)：红，绿，蓝
• rgba(r, g, b, a)：红，绿，蓝，alpha
• hsv(h, s, v)：色相，饱和度，值
• hsva(h, s, v, a)：色相，饱和度，值，alpha
• hsl(h, s, l)：色相，饱和度，亮度
• hsla(h, s, l, a)：色相，饱和度，亮度，alpha

注意：

• a(不透明度) 的取值范围在 0 ~ 255 之间，也可以使用百分比；
• r(红)、g(绿)、b(蓝) 的取值范围在 0 ~ 255 之间，也可以使用百分比；
• s(饱和度)、v(值)、l(亮度) 的取值范围在 0 ~ 255 之间，也可以使用百分比；
• h(色相) 的取值范围在 0 ~ 359 之间；
• Qt 5.13 以上版本支持 HSL(A)。

2.1 颜色关键字：17个

2.2 示例

QLabel { border-color: red }                      /* opaque red */
QLabel { border-color: #FF0000 }                  /* opaque red */

QLabel { border-color: rgb(255, 0, 0) }           /* opaque red */
QLabel { border-color: rgb(100%, 0%, 0%) }        /* opaque red */
QLabel { border-color: rgba(255, 0, 0, 75%) }     /* 75% opaque red */

QLabel { border-color: hsv(60, 100%, 100%) }      /* opaque yellow */
QLabel { border-color: hsva(240, 255, 255, 75%) } /* 75% blue */

QLabel { border-color: hsl(60, 100%, 50%) }       /* opaque yellow */
QLabel { border-color: hsla(240, 255, 50%, 75%) } /* 75% blue */

---

3. Gradient：渐变色

渐变填充分为 3 类：

• qlineargradient 线性渐变：在起始点和终止点之间插入颜色；
• qradialgradient 径向渐变：在焦点圆外圈和中心圆外圈之间插入颜色；
• qconicalgradient 锥形渐变：从一条射线开始逆时针转一圈之间插入颜色；

3.1 线性渐变：qlineargradient

3.1.1 填充模型

线性渐变的填充模型可以想象为一个盒子，左上角在（0, 0），右下角在（1, 1），中间有多个指定了位置百分比的停靠点。

如下图，起始点到终止点的方向决定了渐变方向是从左上到右下，在渐变方向的路径上只有一个位于 0.5 位置的停靠点。

注意：可以指定边框之外的值，如 -0.6、1.8 等。
注意：stop(停靠点)必须从小到大排列。

3.1.2 设置步骤

设置线性渐变的步骤：

1. 确定起始点 x1, y1、终止点 x2, y2。该步骤决定了渐变方向，可以是水平、垂直、倾斜。
2. 确定中间停靠点 stop 位置及颜色。该步骤决定了中间有多少个颜色，以及中间需要过度的颜色。

注意：停靠点必须有首尾两个位置的颜色。

3.1.3 水平渐变示例

background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop:0.5 green, stop:1 red);

其中，起始点(x1:0, y1:0) -> 终止点(x2:1, y2:1)是水平的，因此渐变方向是从左到右的水平渐变。起始停靠点(stop:0 white) 是白色，中间停靠点(stop:0.5 green) 位于 0.5 位置处并且是绿色，终止停靠点(stop:1 red) 是红色。

3.1.4 垂直渐变示例

background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 white, stop:0.5 green, stop:1 red);

其中，起始点(x1:0, y1:0) -> 终止点(x2:0, y2:1)是垂直的，因此渐变方向是从上到下的垂直渐变。起始停靠点(stop:0 white) 是白色，中间停靠点(stop:0.5 green) 位于 0.5 位置处并且是绿色，终止停靠点(stop:1 red) 是红色。

3.1.5 倾斜渐变示例

background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 white, stop:0.5 green, stop:1 red);

其中，起始点(x1:0, y1:0) -> 终止点(x2:1, y2:1)是倾斜的、有角度的，因此渐变方向是从左上到右下的倾斜渐变。起始停靠点(stop:0 white) 是白色，中间停靠点(stop:0.5 green) 位于 0.5 位置处并且是绿色，终止停靠点(stop:1 red) 是红色。

3.1.6 特殊示例：指定值超出边框范围

background: qlineargradient(x1:0, y1:0, x2:2, y2:2, stop:0 white, stop:0.5 green, stop:1 red);

该示例与上一节倾斜渐变类似，所不同的是终止点指定为 x2:2, y2:2，超出了边框范围。超出的部分不会渲染在 widget 上。

3.3 径向渐变：qradialgradient

3.3.1 填充模型

线性渐变是用平面上的两个点来确定填充方向，而径向渐变是用圆来确定填充方向，因此需要确定两个圆：

• 中心圆：圆心(cx, cy)，半径(radius)；
• 焦点圆：圆心(fx, fy)，半径(radius)；

方向为：焦点圆圆点 -> 中心圆外圈。

3.3.2 径向渐变示例

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

该示例的焦点圆圆心 fx:0.5, fy:0.5 和中心圆圆心 cx:0.5, cy:0.5 重合，因此渐变方向就是从中心向四周渐变。

3.4 锥形渐变：qconicalgradient

3.4.1 填充模型

锥形渐变与线性渐变类似，线性渐变是两点之间的颜色渐变，而锥形渐变是一条射线从头开始逆时针到结尾之间渐变，因此需要确定一条射线：

• 射线原点：cx, cy；
• 射线角度：angle；

方向为：射线起始位置 -> 射线终止位置。

---

4. 调色板角色：PaletteRole

示例：

QTextEdit {color: palette(dark);}

palette 可以赋值 widget 的 QPalette 中的颜色角色（QPalette::ColorRole）：

4.1 使用 PaletteRole 的好处

这样我们就可以避免重复声明 widget 中的相同样式。