通过qss实现Qt按钮的默认效果——qconicalgradient

　　这里提供一种使用qconicalgradient()实现QPushButton的默认显示效果的方法，由名字可以知道，qconicalgradient()提供的是一种扇形渐变效果，或称为圆锥式渐变效果。

直接上代码 >>

按钮正常状态时的样式

QPushButton {
    border: 1px solid rgb(124, 124, 124);
    background-color: qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(214, 214, 214, 255), stop:0.50001 rgba(236, 236, 236, 255));
    border-radius:5px;
}

效果如下：

按钮被鼠标滑过时的样式

QPushButton:hover{
    border: 1px solid #3C80B1;
    background-color: qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(181, 225, 250, 255), stop:0.50001 rgba(222, 242, 251, 255));
    border-radius:5px;
}

效果如下：

按钮被按下时的样式

QPushButton:pressed{
    border: 1px solid #5F92B2;
    background-color: qconicalgradient(cx:0.5, cy:0.5, angle:180, stop:0.49999 rgba(134, 198, 233, 255), stop:0.50001 rgba(206, 234, 248, 255));
    border-radius:5px;
}

效果如下：

qconicalgradient()参数详解

　　先来思考如果我们自己实现扇形渐变的话，或者说从数学角度分析，需要些什么元素才能准确描述它。
　　没错！我们需要确定扇形的圆心（中心点）、扇形的半径、扇形的起始角度、扇形的跨度，以及扇形所填充颜色的渐变方向。不过这里我们不需要给定半径大小，因为按钮的大小和形状是未知的，所以我们可以认为qconicalgradient()已经将扇形半径设定为无限大了。
　　
下面解释一下qconicalgradient()中的各个参数到底是什么意思。

• cx和cy的值是中心点的逻辑坐标，所谓逻辑坐标就是将它所描述的对象（箱体模型）的左上顶点设为(0.0, 0.0)，右下顶点设为(1.0,
  1.0)。所以这里的(cx:0.5, cy:0.5)就是指定扇形的圆心在按钮的中心点上。

• angle的值代表扇形的起始角度（单位：度），和数学上定义的一样，默认扇形的起始角度为0，即指向x轴的正方向，角度为正是逆时针方向，角度为负是顺时针方向。

  　　如图所示，蓝点为中心点，黑线为angle等于0时的起始线，红线为angle等于180时的起始线。
  

• stop可以控制扇形的跨度和颜色，确切来说它控制的是扇形从哪里、以什么颜色开始渐变。stop的第一个值表示渐变开始的位置（以angle指定的的角度为0，逆时针转360度后为1），第二个值表示此处的颜色值。所以上面的例子其实0.49999和0.50001之间是有渐变效果的，只不过实在看不出来而已（或者说显示屏无法表达这种渐变）。

  　　值得注意的是，第一个stop前的那部分（即上述例子的0.49999）会显示为第一个stop指定的颜色，而最后一个stop后的那部分（即上述例子的0.50001）会显示为最后一个stop指定的颜色，相信如果用过photoshop等图像处理软件的会很容易理解这一点。