• 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 }

  • 相关阅读:
    第09组 Alpha冲刺 (2/6)
    第08组 Beta冲刺 (1/5)
    第08组 Alpha冲刺 总结
    第08组 Alpha冲刺 (6/6)
    第08组Alpha冲刺(5/6)
    第08组 Alpha冲刺 (4/6)
    第08组 Alpha冲刺 (3/6)
    第08组 Alpha冲刺 (2/6)
    第08组 Alpha冲刺 (1/6)
    第12组 Beta冲刺(2/5)
  • 原文地址:https://www.cnblogs.com/ybqjymy/p/13571546.html
Copyright © 2020-2023  润新知