qss渐变器

qss有三种渐变方式线性渐变（qlineargradient）、辐射渐变（qradialgradient）、梯形渐变（qconicalgradient）

线性渐变

是起点到终点的渐变

background-color:qlineargradient(x1:0, y1:0 , x2:1 ,y2:0 stop:0 black ,stop:1 red);

参数x1 y1 x2 y2 组合表示了是左右渐变、上下渐变、左上右下渐变等。
为了方便记忆，直接记住
左右渐变：y1和y2的值都为零。
上下渐变：x1和x2的值都为零。
注意： x1:0 x2:1 方向是从左往右
x1:1 x2:0 方向是从右往左
y1:0 y2:1 方向是从上往下
y1:1 y2:0 方向是从下网上
只需要记住0—到---1，分别是左—到---右、上—到---下 即可
示例qss代码如下：
 

QLabel#label_line1{
	background-color:qlineargradient(x1:0, y1:0 , x2:1 ,y2:0 stop:0 black ,stop:1 red);
}

stop:0是起点，stop:1是终点，根据参数可得出是左右渐变，效果如下

上下渐变：

QLabel#label_line2{
	background-color:qlineargradient(x1:0, y1:0 , x2:0 ,y2:1 stop:0 black ,stop:1 red);
}

stop:0是起点，stop:1是终点，根据参数可得出是上下渐变，效果如下

左上右下渐变 

QLabel#label_line3{
	background-color:qlineargradient(x1:0, y1:0 , x2:1 ,y2:1 stop:0 black ,stop:1 red);
}

多点渐变

还可以设置多个stop点

QLabel#label_line4{
	background-color:qlineargradient(x1:0, y1:0 , x2:0 ,y2:1 stop:0 black,stop:0.3 blue,stop:0.7 yellow ,stop:1 red);
}

坐标参数全为0或1

坐标参数全为0或者1的时候，颜色全部显示为起始点的颜色

QLabel#label_line5{
	background-color:qlineargradient(x1:0, y1:0 , x2:0 ,y2:0 stop:0 black ,stop:1 red);
}
QLabel#label_line5{
	background-color:qlineargradient(x1:1, y1:1 , x2:1 ,y2:1 stop:0 black ,stop:1 red);
}

辐射渐变

参数说明：
参数cx:值,cy:值 表示圆心的位置
参数radius:值 表示圆的半径
参数fx:值，fy:值 表示渐变的起始位置
参数stop:0 值 表示起始点颜色
参数stop:1 值 表示终点颜色

QLabel#label_radius1{
	/*background-color:qradialgradient(spread:pad, cx:0.5 ,cy:0.5,radius:1,fx:0.5,fy:0.5,stop:0 white ,stop:1 red);*/
     background-color:qradialgradient(spread:pad, cx:0,   cy:0, radius:1, fx:0.5,fy:0.5,stop:0 red   ,stop:1 black);	
	
}

可添加多个中间点

stop可以多添加几个中间点，使用方法如下

QLabel#label_radius_2{
	background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
    stop:0 white,
	stop:0.2 yellow,
	stop:0.4 pink,![在这里插入图片描述](https://img-blog.csdnimg.cn/2020050714060867.png)

	stop:0.6 green,
	stop:0.8 blue,
	stop:1 red)
}

体形渐变

参数说明：
参数cx:值,xy:值 表示起始位置
参数angle:值 表示起始角度

QLabel#label_co1{
	background:qconicalgradient(cx:0.5,cy:0.5,angle:30,stop:0 white,stop:1 red);
}

同理也可插入多个中间点，这里就不演示了（同上）

总结：
1.线性渐变要记住：“0—到---1”即“左—到---右”或“上—到---下”即可，反之。
2.stop可以再中间添加多个点，就会有多个颜色渐变效果

动态渐变，可以设置一个定时器如：

m_gradientColorTimer.setInterval(30);
	connect(&m_gradientColorTimer, &QTimer::timeout, this, [=]{
		// 这里自己可以自行调整渐变色rgb值已经动态变换的规则;

		if (m_colorFactor > 0.8)
		{
			m_isAddFactor = false;
		}
		else if (m_colorFactor < 0.3)
		{
			m_isAddFactor = true;
		}
		m_loginWindow.TopBackWidget->setStyleSheet(QString("QWidget#TopBackWidget{\
					background:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,stop:0 #86fde8, stop:%1 #4776E6, stop:1 #8E54E9);\
                    border-top-left-radius:3px;border-top-right-radius:3px;}").arg(m_colorFactor));

		if (m_isAddFactor)
		{
			m_colorFactor += 0.01;
		}
		else
		{
			m_colorFactor -= 0.006;
		}
		
	});

	m_gradientColorTimer.start();

转自：qss渐变器_qq_29980847的博客-CSDN博客_qss 渐变