QT中QSS的语法设置【颜色渐变处理】

1.渐变颜色设置有：qlineargradient（线性渐变颜色设置），qradialgradient（辐射渐变），qconicalgradient（圆锥形渐变）。

1  QLinearGradient：显示从起点到终点的渐变。
2  QRadialGradient：以圆心为中心显示渐变。
3  QConicalGradient：围绕一个中心点显示渐变。 
4  QGradient::PadSpread ：填充区域内最接近的停止颜色。这是默认的。
5  QGradient::RepeatSpread : 在区域外继续重复填充。
6  QGradient::ReflectSpread : 在区域外反射填充。

2.渐变过程x1->x2 从左向右渐变;y1->y2 从上向下渐变。如果只有x相等,则表示垂直线性渐变,如果只有y相等,则表示平行线性渐变,否则就是斜角线性渐变。

3.左右渐变

1 QLabel#label{
2 background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,
3 stop:0 red,stop:1 green);
4 }

4.上下渐变

1 QLabel#label{
2 background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
3 stop:0 red,stop:1 green);
4 }

 5.左右上下 渐变

1 QLabel#label{
2 background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1,
3 stop:0 red,stop:1 green);
4 }

 6.x1,x2,y1,y2都是设置成0或者1，颜色都一样是红色

1 QLabel#label{
2 background-color: qlineargradient(x1:1, y1:1, x2:1, y2:1,
3 stop:0 red,stop:1 green);
4 }

7.增加多个渐变点

1 QLabel#label{
2 background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0,
3 stop:0 red,stop:0.2 blue,stop:0.5 red, stop:1 green);
4 }

8.辐射渐变

    以圆心为中心显示渐变。(cx, cy)是中点，半径(radius)是以中点为圆心的圆的半径，(fx, fy)是渐变的起点。
 1 QLabel#label{
 2     background-color: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
 3     stop:0 rgba(0, 0, 0, 255),
 4     stop:0.19397 rgba(0, 0, 0, 255),
 5     stop:0.202312 rgba(122, 97, 0, 255),
 6     stop:0.495514 rgba(76, 58, 0, 255),
 7     stop:0.504819 rgba(255, 255, 255, 255),
 8     stop:0.79 rgba(255, 255, 255, 255),
 9     stop:1 rgba(255, 158, 158, 255))
10 }

9.   圆锥形渐变

    在(cx, cy)坐标上以角度(angle)为中心显示渐变。
1 QLabel#label{
2 background-color: qconicalgradient(cx:0.5, cy:0.5, angle:0,
3 stop:0 rgba(255, 255, 255, 255), stop:0.373979 rgba(255, 255, 255, 255),
4 stop:0.373991 rgba(33, 30, 255, 255), stop:0.624018 rgba(33, 30, 255, 255),
5 stop:0.624043 rgba(255, 0, 0, 255), stop:1 rgba(255, 0, 0, 255))
6 }

10.自己的pushButton的代码设置

inline QString Button_QSS_1(){//渐变蓝色
    return "QPushButton"
 "  {"
     "   background-color: qlineargradient(spread:pad,  x1:0, x2:0, y1:0, y2:1,stop: 0 rgba(160,160,160,255),"
     "   stop: 0.495 rgba(180,180,180,255),stop: 0.505 rgba(210,210,210,255),stop: 1 rgba(230,230,230,255));"
     "   background-position:center center;"
     "   font-family:楷体;"
     "   color: black;border-radius:2px;border:2px groove gray;border-style: outset;"
 "   }"
 " QPushButton:pressed{"
 " background-color:rgb(85, 170, 255);"
 " border-style: inset;"
 " }";
}

渐变金属风格